Opaque background on body does not fit page

HTML & CSS
,
1

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
    <body>
        <div id="page"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1c9fc275d85ee05c6e64f09eff62b363" alt="Image">
                    </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>
    </body>
</html>

CSS:

html {
    width: 100%;
    height: 100%;
    background: url('http://www.fg-a.com/wallpapers/geo-shapes-black-1280.jpg') no-repeat fixed center;
    background-size: cover;
}

body {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.35)
}

Produces this: http://prntscr.com/bnolhi
As you can see the background fits the whole page however the overlay does not. Why does it do that? I want the overlay to fill/cover the background. (In other words I want the overlay to fill the entire screen no matter the size of the screen because even if I resize the screen, the background fits the whole page yet the overlay is cut off.)

2

Hi there Kako,

replace this…

html {
    width: 100%;
    height: 100%;
    background: url('http://www.fg-a.com/wallpapers/geo-shapes-black-1280.jpg') no-repeat fixed  center;
    background-size: cover;
 }

body {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.35)
}

…with this…

html,body {
    height: 100%;
    margin: 0;
    background: url(http://www.fg-a.com/wallpapers/geo-shapes-black-1280.jpg) no-repeat fixed center;
    background-size: cover;
 }
#page {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.35);
 }

coothead

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.