Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full page image with 100px header

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41710
    nworbmit
    Member

    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 (https://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

    #119577
    Andy Howells
    Participant

    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.

    #119607
    nworbmit
    Member

    ok thanks

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.