Home/

...

/

Final Polish

Final Polish

How do I add two background images on a single element? Is there a background shorthand property, and how do I use it? These questions and more will be answered in this concluding section of building the movie page project.

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, ...