Start modifying how your pages look and feel in this introductory exploration of CSS.

Web Essentials

If you’re looking to style your front-end, this module is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is not required.

In this module, you will start with a short tour of CSS. You’ll get to experiment with it through examples that explain its role and behavior. From there, you will then dive deep into each technology, exploring concepts like CSS patterns to make your web pages look good.

By the end of this module, you will be able to beautify your own web applications.

Cascading Style Sheets (CSS)

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. 

```css
.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 declaration would be invalid. 

Why? Because you cannot set the `background-size` property without the `background-position` property. 

The preferred solution is to explicitly set the `background-position` property to it's default value of `0% 0%`. This way, nothing's changed. We have a valid declaration. 

<br />
<br />

# Using Multiple Backgrounds 

Multiple background images  may be applied to a single element. That is in fact what we will do in this section. The way to do this is to each background value separated by a comma. Didn't get that? See the example below

```css
.example-bg {
  background: url("/one/image.png") 0% 0%/cover, /*on top*/
            url("/another/image.png") no-repeat  /*on bottom*/
}
```
The declaration above will set 2 background images. The first image appears on top of the other. In the event that you need to add a background-color, only the last background can include a background color.

<br />
<br />

# Final Steps
Now let's include a second background image. The inclusion of this second background image will complete our design.

Below is the complete solution:

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.

Final Polish

Applying the background shorthand