The CSS background property is shorthand for many different background styles. In this video, take a closer look at each individual style.
- [Instructor] So far, we've been using the background property to add colors, but it's actually shorthand for many other background styles. You can write them individually, using longhand syntax, or use the shorthand syntax, and list all the values in one line. Let's look at how each individual property works. As I just mentioned, we've been using background to set the color. But if you want to specify only the color, you can use the longhand property. You can also use the background property to add an image, instead of color.
The value for this property must follow this exact syntax, url, with the file path to the image within the parenthesis. I'm using an online image placeholder service, and that's why it's pointing to a direct website, rather than an image file. Something to note, if you're using an image that is part of the content, like your profile picture, use the html image tag. If the image is there just for decoration, then use css. If your image file is smaller than the element you've applied it to, like in our example, it will automatically repeat the image to fit the entire area.
To keep the image from repeating, use background-repeat, set to no-repeat. If you have a background color defined, it will show in the areas the image doesn't cover. By default, the background image is also aligned to the top-left of it's container, background-position can be used to change this. You can use one or two number values to define the position of the element. It will be relative to it's containers top-left edge. If I add one value, it will represent the position from the left, the top value will auto align.
If we use two values, then the second value will represent the top. Let me just change this to a percentage, and see what happens. So now, it's 20 pixels from the left, and two percent from the top. You can also use keywords, top, left, bottom, right, or center. Let's try using top right. By using the keywords, you'll position the elements right to the edge of it's container.
When the page scrolls, all of the content scrolls with it, including the image. If you use background-attachment: fixed, the background image will stay fixed when you scroll. However, this fixed positioning of the background image is relative to the viewport, not it's container. Let me just add a width to this background wrapper, just to demonstrate what I mean.
Because the image is now fixed to it's viewport rather than it's container, we can't see it because I've set the width to be smaller than the image. So keep that in mind if you're using the fixed positioning. I'm going to remove the width for now. Now let's say you want your image to cover the entire area, without repeating it. We can use background-size with two values, to set the width and the height. Now, if I only set one value, it will be applied to the width. If I go for 100%, it will span the entire width of it's container.
But as you can see, there's still a little extra space at the bottom, and that's because the height is automatically adjusting to the size of the image width, to maintain the aspect ratio. The height won't automatically stretch to cover the entire area. I could define a second value to 100% to make the height fit the container, but if I do that, it might distort the image. In this particular example, it was only a little bit of a difference, so you can't really see the distortion that much, but it really depends on your image size.
It's generally not best practice to set a width, and height, because you want to maintain the aspect ratio. There is another option that we can use instead. We can use the keyword cover. What cover does, is scales the image to cover the entire container. To maintain the images aspect ratio, the part of the image that doesn't fit in the container, will be clipped. So it's not a perfect solution, especially if an important part of the image is not shown. You can however, adjust the background position to keep a specific part of the image within the viewable part of the container.
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts