CODEWITHSUNDEEP
cssbackground-imageviewport
jfar_2020
jfar_2020

Reputation: 161

Make background image 100% of viewport

I was looking for a solution to make my opening background image to be 100% of the viewport. After using Josh powel's answer, it works on Chrome on Mac, but not on any other browser (neither on Mac nor Windows).

When I say 'it works on Chrome on Mac', it means that it works in most instances. However, if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content.

So it's seems like it only works for heights up to x...

Here's my code (Fiddle here).

HTML:

<section class="intro">
    <div class="intro-body">
    
    </div>
</section>

CSS:

.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 350px 0 330px;
    text-align: center;
    color: #fff;
    position: relative;
    background: url(http://www.example.com/example.jpg) no-repeat center;
    background-size:cover;
}

.intro-page {
    padding: 150px 0 130px;
    background: url(http://www.example.com/example.jpg) no-repeat center;
    background-size: cover;
}

And jQuery:

function windowH() {
    var wH = $(window).height();

    $('.intro, .intro-page').css({height: wH});
}

If anyone can shed any light, that'd be great.

Upvotes: 1

Views: 5180

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55663

In order to make an element 100% height of the page, you must also have:

html,body { height: 100%; min-height: 100%; }

It's much better and more reliably to do this in CSS than by using JS.

Alternatively, you could just put the background image on the body (with background-size: cover like you are using).

Upvotes: 3

Related Questions