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:
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.
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.