没有基于px的宽度的background-image / background-size

Question

i have always the problem that if taking a background-image i am not able to see this image until i give the containing give a fixed width:

<div class="picture">
</div>

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
}

This does not work. Even if i update it likes this the image is not shown.

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
width: 100%;
height: 100%;
}

Only if i add a pixel-based width and height the image is shown properly, but i want only percentage based values in my fluid grid.

What is the solution for this? Can i show a background-image without having a pixel based width and height of the containing div?

Thanks!

EDIT: Here is my jsfiddle of my problem. I can't get the picture gets displayed unless i use a px based height: http://jsfiddle.net/t3YZt/

Answer 1

Try adding some height to a container, for instance body:

html, body {
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
.picture {
    background-image:url(http://s23.postimg.org/kewe6boez/test_background_image.png);
    background-size: 100%;
    width: 100%;
    height: 100%;
}

JSFIDDLE

Answer 2

To be sure your background container has any width, you should care of that by your own (setting its height to 100% (of its parent) or any other fixed height, or any auto height dependeintly on children inside).

Then, you do the following for the background:

.picture{
    background-size:cover; /* this way */
    background-size:content; /* or this one */
}

... to stretch the image accordingly to its container size.