Cant display the background image mixed with pseudo class - html

Question

İ am trying to achieve a spesific look but i cant have it. İ cant see the stylistic element unless i lower the opacity of the background color that i apply with pseudo classes. I actually achieved what i needed to do by applying two backgrounds. But i was so hopeless when i had the problem and it really got me angry not having the result so i am asking why cant i see the background image of the class of main2
HTML
<section class="main2">
<div class="main2_image">
<img src="images/illustration-phones.svg" alt="" class="main2_img">
</div>
<div class="main2_textbox">
<div class="box">
<h2>State of the art Infrastructure</h2>
<p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast
connectivity. This ensures your site will load instantly, no matter where your readers are,
keeping your site competitive.</p>
</div>
</div>
</section>
CSS
.main2{
margin-top: 20rem;
position: relative;
z-index: 1;
background-image: url(images/bg-pattern-circles.svg);
border-top-right-radius: 10rem;
border-bottom-left-radius: 10rem;
}
.main2::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -3m;
background-image:
linear-gradient(to right,
hsl(237, 17%, 21%),
hsl(237, 23%, 32%));
}
İ can only display it when i get lower the opacity of main2 pseudo class. Thanks in advance!
The end result should look like this. The after pseudo element is the circular shape that should be on top of the background image of the main2 element

Answer 1

you can do it by css like this
live demo
.bg-gold {
background: -webkit-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -o-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -moz-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
.bg-news {
background: -webkit-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -o-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -moz-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-aurora {
color: #fff;
background: -webkit-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -o-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -moz-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background-size: cover;
background-position: 50% 21%;
text-align: right;
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-purple {
color: #fff;
background: -webkit-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -o-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -moz-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
}
.bg-spring {
background: -webkit-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -o-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -moz-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
}