Being a beginner in HTML and CSS, I recently encountered a challenge while working on some exercises. My goal was to create a website with a blur effect, so I decided to design a header with the class "showcase" and nested inside it, a div with the class "content".
<header class="showcase">
<div class="content">
<img src="img/pexels-photo-373912.jpeg" alt="Photo">
<h2 class="title">Welcome </h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, quidem!</p>
</div>
</header>
To achieve the desired background-image with a blur effect, I utilized the ::after pseudo-element in CSS:
.showcase::after{
content:"";
background-image: url(img/action-america-architecture-378570.jpg);
background-size:cover;
background-position: center;
height: 100vh;
filter: blur(10px);
display: block;
transition: 1000ms;
}
However, an issue arose when I changed the position of the div with the class "content" to absolute:
.content{
position: absolute;
}
Upon making this adjustment, I noticed that the div was positioned behind the ::after background-image. Since the default position for ::after or ::before is static, shouldn't it be the other way around with .content having position:absolute? Can anyone confirm my understanding?