This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element −
The background-color property is used to set the background color of an element.
Set the Background Color
Following is the example which demonstrates how to set the background color for an element.
<html>
<head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>
It will produce the following result −
This text has a yellow background color.
The background-color property is used to set the background color of an element.
- The background-image property is used to set the background image of an element.
- The background-repeat property is used to control the repetition of an image in the background.
- The background-position property is used to control the position of an image in the background.
- The background-attachment property is used to control the scrolling of an image in the background.
- The background property is used as a shorthand to specify a number of other background properties.
Set the Background Color
Following is the example which demonstrates how to set the background color for an element.
<html>
<head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>
It will produce the following result −
This text has a yellow background color.
Set the Background Image
We can set the background image by calling local stored images as shown below
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</head>
<html>
It will produce the following result −
Hello World!
Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.
By default background-repeat property will have repeat value.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>skillgainers.blogspot.in</p>
</body>
</html>
It will produce the following result −
skillgainers.blogspot.in
The following example which demonstrates how to repeat the background image vertically.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>skillgainers.blogspot.in</>
</body>
</html>
It will produce the following result −
skillgainers.blogspot.in
The following example demonstrates how to repeat the background image horizontally.
<html>
<head>
<style>
body {
background-image: url("");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>
It will produce the following result −
skillgainers.blogspot.in
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away from the left side.
<html>
<head>
<style>
body {
background-image: url("");
background-position:100px;
}
</style>
</head>
<body>
<p>skillgainers.blogspot.in</>
</body>
</html>
It will produce the following result −
skillgainers.blogspot.in
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<html>
<head>
<style>
body {
background-image: url("");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>skillgainers.blogspot.in</>
</body>
</html>
It will produce the following result −
skillgainers.blogspot.in
Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
The following example demonstrates how to set the fixed background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
TRY THIS YOURSELF
The following example demonstrates how to set the scrolling background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}.
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
TRY THIS YOURSELF −
Shorthand Property
You can use the background property to set all the background properties at once. For example −
<p style="background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>
