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

Home Forums CSS Full Screen Header Image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #164229
    Jeremy Englert

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

    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?


    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.


    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;



    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.


    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;
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.