Full screen header – before scrolling down

[inlmbrt]

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: http://huntr.co.za/staging/ 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: http://ironsummitmedia.github.io/startbootstrap-creative/) 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!

[Shikkediel]

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…

[Author]

Posts