The World's best Software Development Study Portal
CSS background
In CSS many more properties are there by which we can define different
effects of background-property. And these are as follows:-
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
We can change the background color of any element or webpage using
background-color property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:lightblue";>
<p> Let's see here </p>
<p> I am Manish Singh Bhakuni </p>
</body>
</html>
Output of the Program
Let's see here
I am Manish Singh Bhakuni
So here our background color changes to light blue which we want.
background-image
We can change or implement the background image for any element or in webpage using
background-image property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-image:url(scenery.jpg)">
<p> Let's see here </p>
<p> I am Manish Singh Bhakuni </p>
</body>
</html>
Output of the Program
Let's see here
I am Manish Singh Bhakuni
So here we get our image which we want. But by default this image is in repeat property.
background-position
We can change the position of our image here by using the
background-position property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
< head>
</head>
<body style="background-image:url(scenery.jpg);
background-repeat:no-repeat
background-position:center;">
<p> Let's see here </p>
<p> I am Manish Singh Bhakuni </p>
</body>
</html>
Let's see here
I am Manish Singh Bhakuni
So here due to our background position our image comes to the center.
All CSS background properties
| Property | Description |
| background-size | Specifies the size of the background image |
| background-repeat | Sets how a background image will be repeated |
| background-position | Sets the starting position of a background image |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-image | Sets the background image for an element |
| background-color | Sets the background color of an element |
| background-clip | Specifies the painting area of the background |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background | Sets all the background properties in one declaration |
CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute
