html – Cant display the background image mixed with pseudo class


İ 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!



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here