In the process of designing a website, I am in need of a header with a blurred background that retains sharp edges. To achieve this effect, I implemented the use of ::before in my CSS code.
Current Outcome:
(For full clarity, it may be necessary to view in full-screen mode.)
https://i.sstatic.net/Zr778.jpg
The current code snippet can be accessed here: (View on CodePen)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header {
width: 100%;
min-height: 60%;
padding: 50px 100px;
text-align: center;
color: white;
}
header nav ul {
list-style: none;
}
header nav li {
display: inline-block;
padding: 5px;
}
/* Header background */
.header::before {
position: absolute;
top: 0;
left: 0;
z-index: -100;
content: '';
display: block;
min-height: 60%;
width: 100%;
background: url(https://placeimg.com/1000/662/any) no-repeat fixed top;
-webkit-filter: blur(5px) contrast(125%) brightness(75%);
filter: blur(5px) contrast(125%) brightness(75%);
}<header class="header">
<nav>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
<h1>Title</h1>
<p>Lorem ipsum dolor osit amet, consectetur adipiscing elit.</p>
</header>Desired Look:
https://i.sstatic.net/jbzRP.jpg
I attempted to enclose the design in a container div with overflow: hidden to extend the background slightly beyond, thus hiding the blurred edges. However, this approach proved unsuccessful and I prefer not to introduce unnecessary additional containers since the primary intent was to utilize ::before. I have explored various solutions tailored for achieving sharp edges with image blurs, but they do not directly apply to background images. Could you provide guidance on how I could potentially address this issue?