From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Project: Background image styles

Project: Background image styles

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Background image styles

“

- [Speaker] In this project update, we're gonna add a background image and color overlay to the header area. Let's add this style under the header section. We can also use header as the selector, since it's the only one on the page. In a later chapter, we'll go over how to size elements, but for now, let's add the height property to make the header area larger by setting it to 500 pixels. This will help us see the background styles more clearly. Later when we learn more about sizing, you'll have a chance to adjust this to fit your design preference. Next, we'll add the background image. It's usually recommended to use shorthand syntax where possible to write more efficient CSS. But for this exercise, I'll use the longhand syntax to clearly show each background style as we add it. Let's start by adding the background image property. Then we'll use the URL function to link to the image file. Relative paths are based on the…

Contents