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-color
background-image
background-repeat
background-position
background-size
background-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.
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.
These are the default values of each property:
transparent
none
repeat
0% 0%
auto auto
scroll
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>
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.
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>
-->
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-color
background-image
background-repeat
background-position
background-size
background-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.
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.
These are the default values of each property:
transparent
none
repeat
0% 0%
auto auto
scroll
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>
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.
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>
-->