clarkeis.com/site/introwebdev/week-6-backgrounds.html

[!]
[=title "Week 6: Backgrounds"]
[=content-]
<p>
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.
</p>
<p>
CSS provides two ways to set backgrounds: <code>background-color</code> and <code>background-image</code>. Both
do exactly what they sound like. You set colors like <code>background-color: red;</code>, and you set images like <code>background-image: url("/path/to/image.png");</code>.
We're going to focus on background images.
</p>
<h2>Background Size</h2>
<p>
By default, CSS background images are pretty unpleasant. You usually get a result like this (<code>background-image: url('robot.png');</code>):
</p>
<div style="background-image: url('robot.png');height: 300px;background-size: 330px;"> </div>
<p>
CSS used the most natural size for the image, and then repeated it to fill empty space.
Like with HTML <code>img</code> widths, we can actually set a background size! We do this with the <code>background-size</code> property.
<code>background-size</code> is very cool for many reasons, not least that it accepts <i>percentages</i>: you can set, for instance,
<code>background-size: 50%;</code> and get a result like this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: 50%;"> </div>
<p>
The image takes up 50% of the <i>width</i> of the element, and sets the <i>height</i> to whatever makes sense, so you end up with two repetitions of the image
and the bottom is clipped. We can do better! <code>background-size: 50% 100%;</code> tells CSS to make each image take up half of the width and all of the height,
and stretch if necessary:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: 50% 100%;"> </div>
<p>
The robots got squooshed!
If we want more complicated constraints, we can use "auto": for instance, <code>background-size: auto 100%;</code> produces this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 100%;"> </div>
<p>This sets the background's <i>height</i> to 100% of the element, and sets the background's <i>width</i> to <b>whatever makes the most sense</b>,
so we end up with unstretched images.
</p>
<p>
We can also use numbers in pixels just like with everything else, e.g. <code>background-size: auto 133px;</code>:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;"> </div>
<p>
I recommend playing around with background-sizes a bit on your own.
</p>
<h2>Background Repeat</h2>
<p>
Repeating backgrounds can be nice to fill space, but they don't always look decent. There's another way!
We can use the <code>background-repeat</code> property. This accepts a few unusual values: <code>repeat</code> and <code>no-repeat</code>
(there are more, but they aren't common - check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-repeat">MDN's article on the topic</a>).
</p>
<p>
<code>repeat</code> repeats the background, and <code>no-repeat</code> doesn't. The last size demo from above with <code>background-repeat: no-repeat;</code> set:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;"> </div>
<p>
We only get the one. There's no repetition!
</p>
<p>
Just like with <code>background-size</code>, <code>background-repeat</code> can be set for each <i>axis</i>.
<code>background-repeat: repeat no-repeat;</code> will cause the image to repeat along the horizontal but not repeat on the vertical, like this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: repeat no-repeat;"> </div>
<h2>Background Position</h2>
<p>
As we saw above, when <code>no-repeat</code> is set, we end up with an image in a weird location - the top left corner.
Enter the <code>background-position</code> property! <code>background-position</code> is very complicated, and we won't
be covering all of its many powers today: for now, you can use <code>background-position: center;</code> to center the background,
<code>background-position: x% y%;</code> to put it at a <i>percentage</i> of the container size (just like with <code>background-size</code>),
and <code>background-position: xpx ypx;</code> to put it at an absolute offset from the top-left in pixels.
</p>
<p>
For instance, <code>background-position: center;</code> does this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: center;"> </div>
<p>
This is clearly an improvement. What if we'd prefer it on the other side? <code>background-position: 100% 50%;</code> is the way to go:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: 100% 50%;"> </div>
<p>
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 <code>background-position: 133px 133px;</code> yields
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: 133px 133px;"> </div>
<p>
You should usually use percentages or <code>center</code>.
</p>
<h2>Better Styles</h2>
<p>
The "nicest" way to style your background is through <code>background-size</code>'s two special values
<code>cover</code> and <code>contain</code>. <code>cover</code> increases the background image's size until it fills the whole background like this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-size: cover;"> </div>
<p>
This can be used in conjunction with <code>background-position: center;</code> to get a pretty okay result,
</p>
<div style="background-image: url('robot.png');height: 200px;background-position: center;background-size: cover;"> </div>
<p>
<code>background-size: contain;</code> does sorta the opposite - it sets the image's size so that the whole image is visible, like this:
</p>
<div style="background-image: url('robot.png');height: 200px;background-position: center;background-size: contain;"> </div>
<p>
Note that <code>cover</code> will never produce a repeat, but <code>contain</code> can.
</p>
[/]
[#template.html]