Grow your CSS skills. Land your dream job.

Full page image with 100px header

  • # January 1, 2013 at 4:11 pm

    Hi

    I’m fairly new to css.

    I am looking for a 100% CSS way to have a full page image on a site.
    That expands/contracts as the window is re-sized.
    Like this one: http://ringvemedia.com/

    But I need a 100px empty space at the top for a header.
    I specifically do not want the full page image to hide behind the header.
    I want the top of the image to start at the bottom of the header, not creep up behind it.

    I’ve been plsying around with this stuff (http://css-tricks.com/perfect-full-page-background-image/)and then trying to put these into Divs to block off this 100px empty area at the top, but am not finding the right combination of sizing settings to make it work.

    Starting from scratch, is there a way to do this?

    Thanks

    # January 1, 2013 at 4:29 pm

    You could add a top margin to the body element and then a negative top margin to the header to counter act it.

    Alternatively, you could use a page-wrapper div that sits below the header in the markup and stretches 100% width of the page.

    Please also consider making a [CodePen](http://codepen.io/pen/) of what you already have so we can see if we can edit it to achieve what you need.

    # January 1, 2013 at 6:32 pm

    You mean like this? Just marked up some quick stuff — Overlay is optional to defeat harsh background color with content over top (unless you fill a div with white space)

    PS, to achieve what you’re asking for, you would need Javascript to cover browser compatibility. Otherwise, it will always cut the top of the image off by 100px. You can use CSS3 transformation and keyframes, but it would only work in CSS3 supported browsers. jQuery would handle this easily without a problem.

    Full Screen Sample

    Code Sample

    # January 2, 2013 at 12:58 am

    ok thanks

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

You must be logged in to reply to this topic.

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