CSS Background
Background
CSS background property is used to define the background effects on Html element. There are 5 CSS background properties that affects the Html elements.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
The background-color property is used to specify the background color of the Html element.
Example
<html>
<head>
<style>
h3{
background:yellow;
}
p{
background:cyan;
}
</style>
</head>
<body>
<h3>This is h3 Heading</h3>
<p>This is paragraph</p>
</body>
</html>
Result
This is h3 Heading
This is paragraph.
In above example we set the background color cyan for <p> and yellow for <h3>.
background-image
The background-image property is used to specify the image in background of the Html element.
Example
<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/sublogo.png);
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
Result
This is paragraph.
In above example we set the background color cyan for <p> and yellow for <h3>.
CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically. If you do not want to repeat background image then set no-repeat.
Example: repeat in x-axis
<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/files/sublogo.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
Result
This is paragraph.
Example: repeat in y-axis
<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/files/sublogo.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
Result
This is paragraph.
CSS background-position
background-position is use only in case of when you use image in background of any Html elements. It is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. You can set position of background, all background image position are given below;
- top
- bottom
- center
- left
- right
Browser supported
| Properties | |||||
| background | Yes | Yes | Yes | Yes | Yes |