Get an overview of the various CSS background properties. Learn how to use the individual styles, as well as the shorthand syntax.
- [Educator] There're two ways to add images to a webpage. If it's part of the content, like the project thumbnails, then it should be added to the HTML within IMG take. If it's just for presentation, then it can be added using the Background Property, which shorthand for a variety of styles. Let's look at how the various background properties can be used to make the background images scale for different sizes. We've used the Shorthand Syntax Background to set the color, but the Longhand Properties actually Background Color. Background Image is used to with a URL function value with the path to the image added within the parentheses. I'm just going to expand this panel a bit, so that we could see everything on one line. If the image file is smaller than the area you applied it to, it will automatically repeat the image on the x and y-axis to fit the entire area. To keep the image from repeating, use the Background Repeat Property set to No Repeat. The background color is displayed underneath the image, so it will show in the areas the image doesn't cover. By default, the background image is aligned to the top left of the container. Background Position can be used to define the position of the image relative to its container. One value represents the positioning from the left of the container. Any length value can be used. The top value defaults to Auto, which will aligned the image vertically. Use a second value to specify the position from the top. There're also five keywords. Top, bottom, left, right, and center. But let's just hide this style for now. To get the image to cover the entire area without repeating, Background Size can be used to set the width and the height. The first value is applied to the width. A 100% will make it stretch all the way across and is relative to its container. Use a second value to change the height of the image. If I set it to a 100%, it will span the full height to fill the space. But if the space does not have the same aspect ratio as the image, it will appear distorted. Another option is to use the keyword Cover. To maintain the aspect ratio, the part of the image that doesn't fit into the container will be clipped. This is not a perfect solution, especially if an important part of the image is not shown. We can, however, use the Background Position Property to move a specific part of the image within the viewable part of the container. So, let's say I wanted the buildings in the image to show. I can change the position to Top-Right. Let's add that back in and instead of these numbers, I'm going to use my keywords. By setting the Background Position to Top-Right, when I resize the container, the top-right of the image will always be displayed. You can also use numerical values to be more precise with the image positioning. And sometimes, recutting the image file itself may help too. If you notice that the image appears a little blurry, that's because I'm using a small image file and stretching it out to be much larger. In an actual project, image sizes should match the dimensions of the area it's being applied to. Just like flexible layouts, we make it fit and scale as much it can. Then, we can use media queries to make any adjustments as needed. When using the Shorthand Property, order doesn't matter, except when using a Background Size Value. Background Size must be declared after Background Position, and separated with a forward slash. If no Background Position Value is being used, this shortcut will not work. If you're not using Background Position, just use the Longhand Background Size Declaration. Be sure to include it after the Shorthand Declaration. Remember the Cascade Rule: CSS is applied from top to bottom. This value must come after to override any default values assumed in the Shorthand Declaration. Some properties have specific rules for using the Shorthand Syntax. But, in general, any values that are not explicitly declared will be set to their initial value. So, if you mix Shorthand and Longhand or use different selectors, the values may get overwritten. In this example, the Shorthand Declaration does not declare color, so the default Transparent will be assumed and will override the Background Color Declaration before it. There're actually a few more background properties and more values for the properties we did discuss. You can view the full documentation on MDN.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts