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;
}
headera{
    text-decoration: none;
    color: white;

}
navh1{
    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;
}
navul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}
navullia{
    padding: 1rem0;
    margin: 00.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    navullia{
        padding: 1rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    navullia{
        padding: 0.75rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    navh1{
        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;
}
.contenth1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.contentp{
    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: 5px25px;
    text-transform: uppercase;
}
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="main.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet"></head><body><header><divclass="container bgcont" ><navclass="d-flex flex-row"><h1class="sling mb-0"><ahref="index.html">Sling</a></h1><ulclass="mb-0"><li><ahref="#">Home</a></li><li><ahref="#">Features</a></li><li><ahref="#">Pricing</a></li><li><ahref="#">Testimonial</a></li><li><ahref="#">Download</a></li><li><ahref="#">News</a></li><li><ahref="#">Contact us</a></li></ul><buttontype="button"class="signin">Sign in</button></nav><divclass="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><divclass="container d-flex flex-row justify-content-center"style="font-size: 12px;"><buttontype="button"class="intro">How we do it</button><buttontype="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;
}
*/headera{
    text-decoration: none;
    color: white;

}
navh1{
    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;
}
navul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}
navullia{
    padding: 1rem0;
    margin: 00.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    navullia{
        padding: 1rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    navullia{
        padding: 0.75rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    navh1{
        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;
}
.contenth1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.contentp{
    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: 5px25px;
    text-transform: uppercase;
}
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="main.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet"></head><body><header><divclass="bgcont px-2" ><!-- used px to add some padding like done by container --><navclass="d-flex flex-row"><h1class="sling mb-0"><ahref="index.html">Sling</a></h1><ulclass="mb-0"><li><ahref="#">Home</a></li><li><ahref="#">Features</a></li><li><ahref="#">Pricing</a></li><li><ahref="#">Testimonial</a></li><li><ahref="#">Download</a></li><li><ahref="#">News</a></li><li><ahref="#">Contact us</a></li></ul><buttontype="button"class="signin">Sign in</button></nav><divclass="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><divclass="container d-flex flex-row justify-content-center"style="font-size: 12px;"><buttontype="button"class="intro">How we do it</button><buttontype="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;
}

headera{
    color: white;

}
navh1{
    color: white;
    font-weight: lighter;

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

}

navul{
    list-style: none;
    padding: 0;
}
navullia{
    padding: 1rem0;
    margin: 00.5rem;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 991px) {
    navullia{
        padding: 1rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
}
@media (max-width: 768px) {
    navullia{
        padding: 0.75rem0;
        margin: 00.5rem;
        position: relative;
        font-size: 8px;
        font-weight: bold;
    }
    navh1{
        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;
}
.contenth1{
    color: white;
    max-width: 700px;
    padding-top: 2em;

}
.contentp{
    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: 5px25px;
    text-transform: uppercase;
}
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="main.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet"></head><body><header><divclass="bgcont px-2 pt-1 min-vh-100" ><navclass="d-flex justify-content-between align-items-center"><h1class="sling mb-0"><ahref="index.html">Sling</a></h1><ulclass="mb-0 d-flex align-items-center"><li><ahref="#">Home</a></li><li><ahref="#">Features</a></li><li><ahref="#">Pricing</a></li><li><ahref="#">Testimonial</a></li><li><ahref="#">Download</a></li><li><ahref="#">News</a></li><li><ahref="#">Contact us</a></li></ul><buttontype="button"class="signin">Sign in</button></nav><divclass="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><divclass="container d-flex flex-row justify-content-center"style="font-size: 12px;"><buttontype="button"class="intro">How we do it</button><buttontype="button"class="play">Play into video</button></div></div></div></header></body></html>

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