How to make a div background visible without adding text

Question

I have a main wrapper div with the following css attributes:

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
}

I want to make the whole div and it's brackground to be visible, even if the div itself is empty.

I dont want to use position:fixed or position:absolute if possible.

Answer 1

Unless you set a height in the parent container, the height of your #mainWrapper will compute to 0 and you won't see the background image or color.

Set the height to 100px to double check that your image is loading properly.

Make sure that your body and html tags have height of 100% if you want to use relative heights.

Answer 2

It may be that your HTML or body elements aren't big enough. height:100% will only fill the parent containers height so try adding this to your CSS:

html, body 
{
    height:100%;
}

http://jsfiddle.net/unt9M/ demonstrates this using a single coloured background. Remove the CSS that I've described above and you'll see that the div is only then single line because the body and HTML are not big enough.

Answer 3

add:

body,html{
  height:100%;
}

See http://jsfiddle.net/derekstory/xU2g9/

Note that I added a background color to show the example.

Answer 4

Does you parent have any styles for width and height?

If the parent is body then try like this :

CSS

html,body{
    width:100%;
    height:100%;
}

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
    background-size: cover;
}

JSFiddle