background (Multiple Properties)
The background property is used for setting multiple properties relating to the background styling. These are major properties you can set using this property:
background-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachment
Note: There are other properties or global keywords you can set with the background property but we don't cover them in this course.
Syntax
The order of parameters doesn't need to be the order we have shown here; however, the background-size should be specified after the background-position with '/' in between. Also, you don't need to specify all property values. For example, you can skip the background-color and background-repeat. The default values will be set for the properties if you skip the properties.
Default Values
These are the default values of each property:
- background-color:
transparent - background-image:
none - background-repeat:
repeat - background-position:
0% 0% - background-size:
auto auto - background-attachment:
scroll
Practice
Objective:
Try the background property
1. Update the body section of the HTML file
Add the code below at the end of the body section in the chapter12.html file. For practice purposes, we are adding the style tag in the middle of the HTML document. Usually, it should be written in the <head> section of the chapter12.html file or in a separate CSS file. In this code, we are using the same image file used in the previous practice.
<h2>Background Multiple Properties</h2>
<p>Check the center top icon</p>
<style>
body{
background: lightyellow url(img/palm-tree-round.png) no-repeat 50% 10%/100px fixed;
}
</style>
2. Check the result with a browser
- Open chapter12.html with a browser.
- You can see that the icon is placed in the center of the top of the page and its position is fixed while the background color changes to light-yellow. This means that you successfully set multiple background property values with one line code.
Note: The background image set in the previous section is overwritten by this new code as the new code is written after the previous code. Usually, you don't want to write code similar to this. We have done this only for practice purposes.
3. Comment out the code
To reverse the background settings, comment out the new code.
<!--
<h2>Background Multiple Properties</h2>
<p>Check the center top icon</p>
<style>
body{
background: lightyellow url(img/palm-tree-round.png) no-repeat 50% 10%/100px fixed;
}
</style>
-->
You can also learn this topic offline. Click 
.
More Topics to Explore
Layout Key Design Points
App UI Design Basics: How To Design App UI
