没有显示背景图片的图片

Question

Look at the following JSFiddle

 .container { width: 100%; background-color: yellow; } .classic { display: block; position: relative; margin-left: auto; margin-right: auto; background-position: center center; background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg"); background-size: contain; background-repeat: no-repeat; } .classic-img { display: block; position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0%; left: 0%; } .classic-img img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .top-menu { width: 100%; height: 50px; position: relative; background-color: red; } .top-menu-buttons { position: absolute; margin-left: auto; margin-right: auto; bottom: 0; left: 0; right: 0; width: 50%; text-align: center; } .top-menu-buttons .button { display: inline-block; vertical-align: middle; font-size: 25px; color: white; } .top-menu-buttons span { display: inline-block; vertical-align: middle; font-size: 25px; color: white; } .bottom-menu { width: 100%; height: 50px; position: relative; background-color: green; } .bottom-menu-buttons { position: absolute; margin-left: auto; margin-right: auto; bottom: 0; left: 0; right: 0; width: 80%; text-align: center; } .bottom-menu-buttons .button { display: inline-block; vertical-align: middle; font-size: 35px; color: white; padding-left: 10px; padding-right: 10px; } 

 <div class="list"> <a class="item"> <div id="container" class="container"> <div class="top-menu"> <div class="top-menu-buttons"> <button>-</button> <span>20</span> <button>+</button> </div> </div> <div id="classic" class="classic"> <div id="classic-img" class="classic-img"> <img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" /> </div> </div> <div class="bottom-menu"> <div class="bottom-menu-buttons"> <button class="button button-icon ion-eye">1</button> <button class="button button-icon ion-refresh">2</button> <button class="button button-icon ion-crop">3</button> <button class="button button-icon ion-android-options">4</button> <button class="button button-icon ion-social-tumblr">5</button> </div> </div> </a> </div> 

CSS:

What i want to achieve is something like the following:

The red area should be a top menu. It should not be a fixed top position it should just always be on top of the image.

As you can see the image has a white background and a black forground. It should look like a polaroid.

The green area should be a menu at the bottom but also not fixed to the bottom it should just always be underneath the image. If there is not enough space it should simply scroll not clinch or esize any of the divs. I guess the main problem is the div in the middle where the image with the background image is.

I try for ages now to get the correct css but unfortunately im very unexperienced and all i can do at the moment is try and error but i cant get it working.

Answer 1

remove position: absolute from .classic-img and .classic-img img

add margin: 100px auto; adjust 100px as per your need, also you have set background-size: contain and the aspect ratio of bg image is almost equal to the image, therefore you would see only small portion of bg image here in the fiddle - jsfiddle.net/18vg13dt/3

additionally if you want gap from left and right also the use - margin: 100px 50px; similarly according to your needs.

jsfiddle

Answer 2

I guess this is what you want?

.classic {
    background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.classic-img {
    padding: 10px;
    box-sizing: border-box;
}

.classic-img img {
    display:block;
    width:100%;
    height:100%;
}

Answer 3

You need to set the height for the class .classic-img

Try this :

.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}

If you still face the issue, do come back and let us know.