Background image full width with content fixed width

[themightyasok]

Hi all,
I am just wondering if anyone knows a clever technique using CSS3 / HTML5 to create a block (div for example) that has a background image full width of the screen, and the content is fixed. I would usually do it something like this:

content

Were the background image div is width 100%, and has the background image (funnily enough), and then the inner is something like 800px and margin 0, auto.

I am thinking that there is perhaps a modern method for this that I dont know about (script independent)…but I suppose a caveat is this must work in all browsers (including, sadly, ie6). So it might be that i cannot use it, but if I can, I would like to try.

I did find this:

https://css-tricks.com/full-browser-width-bars/

But its not really correct for what I am looking at.

Im a first time poster so I hope I have followed the rules, and thanks in advance for any help. It is appreciated.

Thanks

Stu

[TheDoc]

I think you’re just asking for a full-page background image?

https://css-tricks.com/perfect-full-page-background-image/

Just make sure to put in some solutions for IE!

[themightyasok]

No sadly that wont work – the sections can vary in height, and sometimes not even be there. Its not just a fixed thing. There are multiple divs on top of each other with different style backgrounds…

[TheDoc]

Well, you can still just use background-size: cover;, no?

[themightyasok]

Nope…

If I use background size cover, then it will cover the area of the container. If the area of the container is fixed at say 900 pixels (as it would have to be for the content) then the background will only cover the content. Remember – I need the content to be fixed in a central width column and I need the background to stretch on forever. It feels like the only way must be an outer div with BG and an inner div with content.

Stu

[Author]

Posts