Why background gradient pushing content down? - html

Question

I have a class called bgGradient which adds a gradient. When .bgGradient is added, it's pushing my content down a considerable amount, whereas I basically just want it as the background.
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
position: absolute;
background: rgb(92, 156, 155);
background: -moz-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
background: -webkit-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
background: linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c9c9b", endColorstr="#8ccdcc", GradientType=1);
}
.bgGradient:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 100vh 0 0 100vw;
border-color: #fff transparent #fff transparent;
z-index: 2;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>

Answer 1

No need extra element, you can consider multiple background:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
background:
linear-gradient(to bottom left,#fff 49.7%,transparent 50%),
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
You can also have transparency using clip-path:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
z-index:0;
}
.bgGradient:before {
content:"";
position: absolute;
z-index:-1;
top:0;left:0;right:0;bottom:0;
background:
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
Or mask-image:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
z-index:0;
}
.bgGradient:before {
content:"";
position: absolute;
z-index:-1;
top:0;left:0;right:0;bottom:0;
background:
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
-webkit-mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>