Preview
Background Images
4:23So far, our work with images has been limited to content images, inserted into the HTML using the element. And we’ve targeted these images using the
selector in our CSS, or by adding IDs or classes to our images.
But that’s not the only way to work images into your web layout. Images can also be decorative, inserted into your CSS as background images. In this video, we’ll find out how.
[MUSIC]
0:00
So far, our work with images
has been limited to content
0:05
images inserted into the HTML
using the <img> element.
0:09
And we've targeted these images
using the `img` selector in our CSS,
0:15
or by adding IDs or classes to our images.
0:22
But that's not the only way to
work images into your web layout.
0:26
Images can also be decorative, inserted
into your CSS as background images.
0:31
In this video, we'll find out how.
0:38
The background-image property is
unsurprisingly what we'll use to insert
0:42
background images into our document.
0:47
Most of the time, this CSS property
only accepts one value, which is url().
0:50
In other words,
where is your background image found?
0:56
This might be a single file or
perhaps, a comma separated list
1:01
of multiple files if you're layering
transparent graphics, like PNGs.
1:05
I say we provide one value most
of the time because you can also
1:11
use the background-image property
to help you create gradients, but
1:15
we'll save that for the next stage.
1:19
To explore the background-image property,
1:24
I'm going to first work with a placeholder
image from a site called placekitten.
1:27
Let's try adding kittens to
the background of our webpage by
1:33
targeting the body element.
1:36
And now we've covered
our page with kittens.
1:49
This is fun, but
1:52
unless you're working with a tiled pattern
image that's meant to repeat, you'll
1:53
likely want to use the background-repeat
property to specify otherwise.
1:59
We could set the value
to repeat-x if we wanted
2:04
the kittens to tile just horizontally,
2:10
or repeat-y if we want the kittens
to tile just vertically.
2:15
Or, we could use the value no-repeat,
if we don't want the image to tile at all.
2:29
Now I can't see my kitten anymore,
since it's covered by the website header.
2:38
To be able to see it again, we could use
the background-position property to move
2:43
the background image away from the upper
left corner, where it lands by default.
2:49
For example, I'll try using the two
value syntax suggested by the MDN
2:55
docs on background-position to
place the background image in
3:00
the horizontal center and
at the bottom of the page.
3:04
While pixel values and
percentages are both acceptable here,
3:09
we can also work with keywords like center and bottom.
3:14
You'll have to scroll all the way down
to see the kitten, and there it is.
3:26
Note that we typed the horizontal position
first, followed by the vertical position.
3:32
We could even make that kitten larger
with the background-size property.
3:39
When typing values, the image width
comes first, followed by the height.
3:48
There are more properties and
3:56
values relating to CSS background
images than what I've covered here.
3:58
And I encourage you to read
the articles in the teachers notes and
4:04
explore on your own.
4:07
In the next video, we're going to
create a more practical example.
4:10
So in the meantime, I'm going to back up
and erase the code I added in this video.
4:14