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

Home Forums CSS Full screen header – before scrolling down

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #206639

    Hey there CSS-Tricks :]

    I’m trying my hand at Bootstrap (quite new to front-end development) and have a quick question regarding the header area of my website.

    If you take a look here: You will see the main area split into a 5 and 7 column grid. The phone is in the 5 column grid, and the copy is centre aligned in the 7 column grid. I’m trying to get that phone to stick to the bottom of the screen (no matter what resolution), the text to be centred vertically and the <header> div to be full screen horitonzally and vertically (something like something like: until you scroll down where it moves up like you’re scrolling normally. I’ve tried

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

    on the <header> but I think I’m using it incorrectly.

    Any help will be hugely, hugely appreciated. :]

    Thanks guys!


    If you would make a pen or fiddle from it, members might be more inclined to give it a go. There’s too much to be changed when we can only look at the source. The cover property works as expected, it’s just that the header is a lot larger than the initial screen size (one aspect that would need to be altered).

    The default property (no prefix) should always come last though…

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