There are following background properties defined below:
1) There is a property named as background-color
2) There is another property named as background-image
3) There is another property named as background-repeat
4) There is another property named as background-attachment
5) There is another property named as background-position
These all properties are defined and explained below with example and
source code.Hope you will enjoy it.
Example of Background color
<style type="text/css">
.b-c{
background-color: lightgrey;
}
</style>
<div class="b-c">
It's background-color is light-grey.
Here background-color property is used.
</div>
Output of above code
It's background-color is light-grey.
Here background-color property is used.
Example of Background image
<style type="text/css">
.b-img{
background-image: url("img/blog-img/3.jpg");
}
</style>
<div class="b-img">
It's background-color is light-grey.
Here background-color property is used.
</div>
Output of above code
It's background-image is shown. Here background-image property is used.
The background-repeat
There are following properties for background repeat.
1) background-repeat: repeat-x;
This is used to repeat the image horizontally
2) background-repeat: repeat-y;
This is used to repeat the image vertically
3) background-repeat: no-repeat;
This is used to prevent from repeating the image
<style type="text/css">
.r-img{
background-image: url("img/blog-img/3.jpg");
background-repeat: no-repeat;
background-position: right top;
}
</style>
<div class="r-img">
It's background-repeat is no-repeat.
Here background-repeat property is used.
</div>
Output of above code
It's background-repeat is no-repeat.
Here background-repeat property is used.
Explanation of background-position
In above example background-position property is used
which is for specific position to the background images.
The background-attachment
There are following properties for background-attachment.
1) background-attachment: scroll;
This is used to scroll the image
2) background-attachment: fixed;
This is used to prevent the image from scroll
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
