I'm trying to blur a background image on my website without blurring all of the other elements. I've been trying all morning and I'm burnt out. Can anyone help?
This is what it looks like This is what I want the background to look like, but the text should not be blurred.
This is what my code is looking like
<section id="upper" style="background-image: url(images/Icon\ Grid\ \(1\).svg); filter: blur(4px); ">
<p style="visibility: hidden;">top</p>
<h1>Practice Site</h1>
<p style="font-size: 23px; margin-top: -25px; position:relative;">HTML & CSS.</p>
<hr style="width: 100%; margin-top: 500px; border-radius: 5px; color: lightblue;">
</section>
