CODEWITHSUNDEEP
htmlcsswordpressbackgroundgradient
IPG Mediabrands NL
IPG Mediabrands NL

Reputation: 13

How can I make my gradient background cover the whole div?

I'm working on making a website better to read. I succeeded in covering my photos with background gradients to make the letters more visible. The problem is that the background gradient doesn't cover the entire div/image.

Here is the code:

#us_grid_1 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}

    #us_grid_1 .usg_vwrapper_1 {
    background: linear-gradient( transparent, rgba(30,30,30,0.8));
}
<style id="us_grid_1_css">@media (max-width:1023px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:767px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:599px){#us_grid_1 .w-grid-item{width:100%}}</style>
<div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Connections Panel</h2></div>

In this website: https://marketingsciences.nl/

Upvotes: 1

Views: 1201

Answers (2)

Shakil Hossain
Shakil Hossain

Reputation: 1743

Also, you can follow this https://codepen.io/alexcarpenter/pen/LveDx here image and gradient both used combaundky 

#us_grid_1 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}
.bg_gradient {
    background-image: linear-gradient(to bottom, rgba(156, 106, 106, 0), #008464);
    height: 200px;
}
<style id="us_grid_1_css">@media (max-width:1023px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:767px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:599px){#us_grid_1 .w-grid-item{width:100%}}</style>
<div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Connections Panel</h2></div>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Remove #us_grid_1 from css because you do not set in html id=us_grid_1

Learn about selector in css

 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}

.usg_vwrapper_1 {
    background: linear-gradient( transparent, rgba(30,30,30,0.8));
}
@media (max-width:1023px){
.w-grid-item{width:50%}
.w-grid-item.size_2x1,
.w-grid-item.size_2x2{width:100%}
}
@media (max-width:767px){
.w-grid-item{width:50%}
.w-grid-item.size_2x1,
.w-grid-item.size_2x2{width:100%}
}
@media (max-width:599px){
.w-grid-item{width:100%}}
<div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient"><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Connections Panel</h2></div>

Upvotes: 1

Related Questions