From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Blurring images

Blurring images - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Blurring images

“

- [Chris] Hi, this is Chris Converse and in this episode we'll blur an image with CSS. This will give us the ability to adjust the design for readability without the need to alter the original image in a graphics application. So if you'd like to follow along download the Exercise Files and we'll begin by opening the HTML file in a text editor. Now once you have the HTML file open in a text editor you'll see up in the head area we have a link to a file called style.css, we'll be opening this in a moment. And if you open this in a web browser you'll see the beginnings of our layout. Now the first thing we need to do is add the image into the HTML, so we can style it with CSS and add our blur effect. And I want the image to be behind our main element here. So after the body element before the main element let's come in here and add our image. So we'll type image space, we'll set the source equal to, let's go into the images directory and choose background.jpg, then we'll end the image…

Contents