Grow your CSS skills. Land your dream job.

Background image full width with content fixed width

  • # April 15, 2012 at 7:57 pm

    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:

    http://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

    # April 15, 2012 at 8:30 pm

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

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

    Just make sure to put in some solutions for IE!

    # April 15, 2012 at 8:45 pm

    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…

    # April 15, 2012 at 8:52 pm

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

    # April 16, 2012 at 4:48 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".