Full Screen Header Image

[Jeremy Englert]

Been seeing this a lot lately, but not 100% sure the best way to achieve it.

http://themeforest.unitedthemes.com/wpversions/brooklyn/landing/

While the parallax effect is cool, my real question is about getting the header image to be 100% height and width.

What would be the best way to achieve this?

Thanks!

[Jeremy Englert]

I understand how to apply background-size:cover to an HTML or Body Element, but I can’t get the same effect for a header div.

[Senff]

If you’re referring to the collection of screenshots that’s floating on the screen: that’s not really a header, but a <SECTION> element that’s just the first main element in the page. The height is set to 100% and as @wahhabb said, it has background:cover;

[Jeremy Englert]

I tried setting the div to 100% height, but had no luck. Here is what I have:

.header {
    animation: 40s linear 0s normal none infinite animatedBackground;
    background: url("../images/header.jpg") repeat-x fixed 0 0 rgba(0, 0, 0, 0);
    min-height: 100%;
    position: relative;
}

Demo:
http://jengl.com/dev/

[Larsinho]

The parent-divs don’t have a height set explicitly, so min-height won’t have any effect. Try min-height: 100vh; for full viewport height.

[Senff]

Your header is taking up the whole height of the page, that’s not the problem. What I don’t see, is background-cover anywhere in there. If you apply this to your header, things may be more like the initial example:

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

[Author]

Posts