Search⌘ K
AI Features
Home
Courses
The Complete Advanced Guide to CSS

Final Polish

Explore how to effectively use CSS background shorthand properties and apply multiple background images in a project. Understand layering order and positioning to create visually appealing movie order pages. This lesson solidifies practical styling knowledge through hands-on application with a real-world example.

We'll cover the following...

We veered away from the movie page project for a bit. Let’s return.

Here is the current state of the project:

Applying the background shorthand

Let’s rewrite the style on the .movie class to use the background shorthand property.

.movie {
  width: 100%;
  color: #fff; 
  padding: 20px 20px 20px 190px;
  box-sizing: border-box; 
  background: url("http://i.imgur.com/2tiJEnP.png") 0% 0%/cover
}

Looks good.

If you wrote this: background: url("http://i.imgur.com/2tiJEnP.png") cover, the ...