How to Add a CSS Blurred Background (Without Blurring Your Text!)
Ever tried to add a blur to your background in CSS, only to find it blurs your entire page, including the text? In this tutorial, we fix that common problem.
I'll show you the right way to add a blurred background image using a separate div and the CSS filter: blur() property. We'll walk through the common mistakes (like why the image doesn't show up at first!) and use properties like background-size: cover and background-position: center to make it look great.
Once the background is blurred, we'll add crisp text on top using position: absolute and z-index, and I'll show you a bonus tip to perfectly center that text, even when the browser resizes!
Video Index:
0:00 About adding Blur
0:06 Adding a background image
1:02 Why does it never work first time!
1:23 Background Height Fixed!
1:43 Background Settings
2:04 Adding Blur Filter
2:35 Adding Text on Top
3:01 Auto Complete is Annoying!
4:05 Reducing the Blur
4:20 Formatting the Overlay Text
5:00 Bonus Tip
#css #webdevelopment #csstutorial