Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html

Background Not Expanding To The Viewport Width

Post a Comment
I want to extend the width of the background to that of the viewport and its height equal to the content I'm putting inside it. As you can see, I've set the width of .bgcont in CSS

Solution 1:

Width issue

For the width issue, it's just a matter of adding the following:

header .bgcont {
  …
  max-width: none;
}

Keep in mind, though, that this line is overriding rules inside of _grid.scss for various breakpoints:

Height issue

For the height to end just below the two buttons you've added, remove the height rule in .bg-cont. To give things a bit of breathing room, I added a touch of bottom padding as well.

Demo

*{
    margin: 0;
    padding: 0;
}
html{
    font-family: sans-serif;
}
body{
    overflow-x: hidden;
}
header a{
    text-decoration: none;
    color: white;

}
nav h1{
    color: white;
    font-weight: lighter;

}
header .bgcont{
    max-width: none; /* Overrides existing rules defined in _grid.scss */
    background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
    background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
    background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);

    /*z-index: 6;*/
    border-bottom-left-radius: 300% 100%;
    border-bottom-right-radius: 300% 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    padding-bottom: 1.5em; /* <-- Added to make things look nice */
    /* height: 100% /*     /* <-- Removed this */ 
}

nav{
    justify-content: space-between;
    align-items: center;
}
nav ul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}
nav ul li a{
    padding: 1rem 0;
    margin: 0 0.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    nav ul li a{
        padding: 1rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    nav ul li a{
        padding: 0.75rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    nav h1{
        font-size: large;
    }
}
.signin{
    border-radius: 15px;
    border: 1px solid transparent;
    color: white;
    width: 100px;
    height: 30px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #1ecec2;
}
.content h1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.content p{
    color: white;
    max-width: 650px;
}
.intro {
    margin: 10px;
    background-color: white;
    color: #4970f1;
}
.play{
    margin: 10px;
    background-color: transparent;
}
.play, .intro{
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 5px 25px;
    text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container bgcont" >
            <nav class="d-flex flex-row">
                <h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
                <ul class="mb-0">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Testimonial</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
                <button type="button" class="signin">Sign in</button>
            </nav>
            <div class="container d-flex flex-column text-center align-items-center content">
                <h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
                <p>Surprisingly, there is a very vocal faction of the design community that
                    wants to see filler text banished the original sources from who it comes.</p>
                <div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
                    <button type="button" class="intro">How we do it</button>
                    <button type="button" class="play">Play into video</button>
                </div>

            </div>
        </div>
    </header>
</body>
</html>

Solution 2:

Its a bootstrap related issue. Actually you are using container class which is meant for fixed width grid.

You suppose to use container-fluid instead.


Solution 3:

You have added the bg in the container, width: 1140px. For this reason it is not covering the full area. and for the height, in fullscreen view the height is covering 100% of the viewport.

Refer to the screenshot


Solution 4:

Class container it's used for a web with a max width. Class container-fluid it's for web that uses full width.

When using container it's supposed you will change max-width to set what your design has


Solution 5:

Simply use min-height instead of height to include the button on small screens and remove container class to have full width:

*{
    margin: 0;
    padding: 0;
}
html{
    font-family: sans-serif;
}
/* don't need this
body{
    overflow-x: hidden;
}
*/
header a{
    text-decoration: none;
    color: white;

}
nav h1{
    color: white;
    font-weight: lighter;

}
header .bgcont{
    background-image:linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);

    /*z-index: 6;*/
    border-bottom-left-radius: 300% 100%;
    border-bottom-right-radius: 300% 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; /*don't use vw to avoid including scrollbar in the width*/
    min-height: 100% ;
    padding-bottom:50px;

}

nav{
    justify-content: space-between;
    align-items: center;
}
nav ul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}
nav ul li a{
    padding: 1rem 0;
    margin: 0 0.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    nav ul li a{
        padding: 1rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    nav ul li a{
        padding: 0.75rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    nav h1{
        font-size: large;
    }
}
.signin{
    border-radius: 15px;
    border: 1px solid transparent;
    color: white;
    width: 100px;
    height: 30px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #1ecec2;
}
.content h1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.content p{
    color: white;
    max-width: 650px;
}
.intro {
    margin: 10px;
    background-color: white;
    color: #4970f1;
}
.play{
    margin: 10px;
    background-color: transparent;
}
.play, .intro{
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 5px 25px;
    text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <header>
        <div class="bgcont px-2" > <!-- used px to add some padding like done by container -->
            <nav class="d-flex flex-row">
                <h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
                <ul class="mb-0">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Testimonial</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
                <button type="button" class="signin">Sign in</button>
            </nav>
            <div class="container d-flex flex-column text-center align-items-center content">
                <h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
                <p>Surprisingly, there is a very vocal faction of the design community that
                    wants to see filler text banished the original sources from who it comes.</p>
                <div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
                    <button type="button" class="intro">How we do it</button>
                    <button type="button" class="play">Play into video</button>
                </div>

            </div>
        </div>
    </header>
</body>
</html>

You can also optimize your code and rely on Bootstrap classes. I have also used gradient to have a better curve at the bottom:

html{
    font-family: sans-serif;
}

header a{
    color: white;

}
nav h1{
    color: white;
    font-weight: lighter;

}
header .bgcont{
    background:
      radial-gradient(55% 100px at top,transparent 93%,#fff 95%) bottom/100% 100px no-repeat,
      linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
    padding-bottom:30px;

}

nav ul{
    list-style: none;
    padding: 0;
}
nav ul li a{
    padding: 1rem 0;
    margin: 0 0.5rem;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    nav ul li a{
        padding: 1rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    nav ul li a{
        padding: 0.75rem 0;
        margin: 0 0.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    nav h1{
        font-size: large;
    }
}
.signin{
    border-radius: 15px;
    border: 1px solid transparent;
    color: white;
    width: 100px;
    height: 30px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #1ecec2;
}
.content h1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.content p{
    color: white;
    max-width: 650px;
}
.intro {
    margin: 10px;
    background-color: white;
    color: #4970f1;
}
.play{
    margin: 10px;
    background-color: transparent;
}
.play, .intro{
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 5px 25px;
    text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <header>
        <div class="bgcont px-2 pt-1 min-vh-100" > 
            <nav class="d-flex justify-content-between align-items-center">
                <h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
                <ul class="mb-0 d-flex align-items-center">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Testimonial</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
                <button type="button" class="signin">Sign in</button>
            </nav>
            <div class="container d-flex flex-column text-center align-items-center content">
                <h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
                <p>Surprisingly, there is a very vocal faction of the design community that
                    wants to see filler text banished the original sources from who it comes.</p>
                <div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
                    <button type="button" class="intro">How we do it</button>
                    <button type="button" class="play">Play into video</button>
                </div>

            </div>
        </div>
    </header>
</body>
</html>

You may like these posts

Post a Comment for "Background Not Expanding To The Viewport Width"