Menu
How can I have a gradient layer over a cover image?
For instance:
header {
position: relative;
height: 300px;
background-repeat: no-repeat;
background-position: center bottom;
background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg');
background-size: cover;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}<header>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>I want this gradient over that image:
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
Is it possible?
690
CSS gradients allow us to display smooth transitions between two or more colours. They can be added on top of the background image by simply combining the background-image URL and gradient properties.
CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
You can combine a background-image and CSS3 gradient on the same element by using several backgrounds. In our example below, we set the height and width of our <div> and add a background. Then, we set the background image fallback using the “url” value of the background-image property.
Use rgba with transparency and double background-image.
header {
position: relative;
height: 300px;
background-repeat: no-repeat;
background-position: center bottom;
background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5)), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg');
background-size: cover;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}<header>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
