[!] [=title "Week 6: Backgrounds"] [=content-]

At this point, we've all used enough CSS to make basic layouts and pages with simple color schemes. Now we're going to do a deep dive into one of the more complicated topics in CSS: backgrounds.

CSS provides two ways to set backgrounds: `background-color` and `background-image`. Both do exactly what they sound like. You set colors like `background-color: red;`, and you set images like `background-image: url("/path/to/image.png");`. We're going to focus on background images.

## Background Size

By default, CSS background images are pretty unpleasant. You usually get a result like this (`background-image: url('robot.png');`):

CSS used the most natural size for the image, and then repeated it to fill empty space. Like with HTML `img` widths, we can actually set a background size! We do this with the `background-size` property. `background-size` is very cool for many reasons, not least that it accepts percentages: you can set, for instance, `background-size: 50%;` and get a result like this:

The image takes up 50% of the width of the element, and sets the height to whatever makes sense, so you end up with two repetitions of the image and the bottom is clipped. We can do better! `background-size: 50% 100%;` tells CSS to make each image take up half of the width and all of the height, and stretch if necessary:

The robots got squooshed! If we want more complicated constraints, we can use "auto": for instance, `background-size: auto 100%;` produces this:

This sets the background's height to 100% of the element, and sets the background's width to whatever makes the most sense, so we end up with unstretched images.

We can also use numbers in pixels just like with everything else, e.g. `background-size: auto 133px;`:

I recommend playing around with background-sizes a bit on your own.

## Background Repeat

Repeating backgrounds can be nice to fill space, but they don't always look decent. There's another way! We can use the `background-repeat` property. This accepts a few unusual values: `repeat` and `no-repeat` (there are more, but they aren't common - check out MDN's article on the topic).

`repeat` repeats the background, and `no-repeat` doesn't. The last size demo from above with `background-repeat: no-repeat;` set:

We only get the one. There's no repetition!

Just like with `background-size`, `background-repeat` can be set for each axis. `background-repeat: repeat no-repeat;` will cause the image to repeat along the horizontal but not repeat on the vertical, like this:

## Background Position

As we saw above, when `no-repeat` is set, we end up with an image in a weird location - the top left corner. Enter the `background-position` property! `background-position` is very complicated, and we won't be covering all of its many powers today: for now, you can use `background-position: center;` to center the background, `background-position: x% y%;` to put it at a percentage of the container size (just like with `background-size`), and `background-position: xpx ypx;` to put it at an absolute offset from the top-left in pixels.

For instance, `background-position: center;` does this:

This is clearly an improvement. What if we'd prefer it on the other side? `background-position: 100% 50%;` is the way to go:

This literally means "100 percent of the way to the right, and 50 percent of the way down". If we prefer a position in pixels, we can also use that, for instance `background-position: 133px 133px;` yields

You should usually use percentages or `center`.

## Better Styles

The "nicest" way to style your background is through `background-size`'s two special values `cover` and `contain`. `cover` increases the background image's size until it fills the whole background like this:

This can be used in conjunction with `background-position: center;` to get a pretty okay result,

`background-size: contain;` does sorta the opposite - it sets the image's size so that the whole image is visible, like this:

Note that `cover` will never produce a repeat, but `contain` can.

[/] [#template.html]