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