Solution 1 :

In order for height:100% to work, it needs to be in a container with an explicitly defined height (eg: 100px). This can be a distant ancestor if the ancestors between also have percentage heights.

If you want it to be 100% of the viewport, try 100vh instead.

Solution 2 :

Why not just add it to the body? Like this:

body {
    padding-top: 140px;
    height:100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover; 
}

Here’s an example:

 .centering {
    text-align: center;
    padding-top: 25%;
    height: 100%;

}
body {
    padding-top: 140px;
    height:100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
 
}
.wrapper {
    height: 100%;
    width: 100%;
}
h1 {
    height: 100%;
}
   <body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">PURFFECT MATCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Signup</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="centering">
                    <h1>Purrfect Match</h1>
                    <h3>Matching felines in need to human caretakers</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</div>

Problem :

So I’m in the process of making a very simple landing page using just html and css with bootstrap, and I’ve been trying to have a background image that covers 100% of the available browser window, and I’ve tried wrapping it in a class=”wrapper” tag and also applying “height:100%” to many different elements but the image just does not extend beyond the last html element in the body.

Edit: spelling

The main markup:

    <body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">PURFFECT MATCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Signup</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="centering">
                    <h1>Purrfect Match</h1>
                    <h3>Matching felines in need to human caretakers</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https:code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

All the CSS I’ve applied:

    .centering {
    text-align: center;
    padding-top: 25%;
    height: 100%;

}
body {
    padding-top: 140px;
    height:100%;
}
.wrapper {
    height: 100%;
    width: 100%;
    background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
}
h1 {
    height: 100%;
}

what the webpage looks like

Comments

Comment posted by BaamAhmed

Damn, the 100vh tip works perfectly. Thanks!

Comment posted by stackoverflow.com/help/someone-answers

Don’t forget to mark the answer as Accepted @BaamAhmed

Comment posted by BaamAhmed

I did try that as well, but the result was the same background that was cut off about halfway down the screen.

Comment posted by John

Ah ok, well the 100vh answer is the one you’re probably looking for then.

By

Leave a Reply

Your email address will not be published. Required fields are marked *