I have an image that I would like to overlay on top of a background gradient that I have set on a section
element. Both the background gradient and image I am setting in CSS and calling via a class in HTML. Originally when just using the background gradient it worked fine, but after adding the image to place over the background gradient the background gradient disappeared?
.banner-gradient {
background: radial-gradient(circle, #ba000b, #9e0008);
color: white;
z-index: 0;
}
.banner-overlay {
background: url("../imagery/image.png");
max-width: 100%;
height: auto;
background-position: bottom;
background-repeat: repeat-x;
z-index: 1;
}
.section-align-center {
text-align: center;
}
<section class="banner-gradient banner-overlay section-align-center">
<div class="container">
<p>image over background gradient</p>
</div>
</section>
3
Answers
I solved this with the help of this post. You must first place the
banner-gradient
in your outerdiv
then in your innerdiv
usebanner-image
.HTML
Try using background-image instead of background for image.
I would rather edit the class of the element you want the transparency in
https://jsfiddle.net/mergatroid/xkmyqjec/1/