The background color property allows you to set the background color of an HTML element.
The following CSS code example shows how to set the background property of a paragraph in aninternal style sheet.
<html>
<head>
<style type=”text/css”>
p
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This paragraph will have a cyan background
</p>
</body>
</html>
Click here to view the web page the above code produces.
<html>
<head>
<style type=”text/css”>
body
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This web page will have a cyan background
</p>
</body>
</html>
Click here to view the web page the above code produces.
Setting an Image as a Background
With the help of following CSS code, we will show you how to insert an image as a background. Scroll up and down the web page and notice how the image scrolls with the web page. By default, the page background image will scroll with the page.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.gif’)
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click here to view the web page the above code produces.
Creating a Fixed Background Image
A fixed background image can be created using the background-attachment: fixed property. The property allows the image to stay in the same place on the screen while the web page scrolls.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘img.gif’);
background-attachment: fixed
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click here to view the web page the above code produces.
Controlling the Background Tiling Effect
The tiling effect of the background image can be controled with the use of the background-attachment: fixed property. The following CSS examples show you how to control the various tiling effects with the respective background repeat properties.
The CSS code {background-repeat: repeat} will tile the image both horizontally and vertically. This is the default setting.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
You can tile the image in the horizontal direction only if you like.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat-x
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
You can tile an image in the vertical direction only.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat-y
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
You can have a background image appear only once.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
Positioning a Background Image
CSS allows you to control precisely where you will place a background image (background positioning) within an HTML element by using the background-position property.
The CSS code background-position: x% y% (position from left and top respectively ) allows you to place the background image x% (x percentage) across the web page and y% (y percentage) down the web page. Giving it values of “0 0″ will place the background image in the top left hand corner.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: 50% 50%
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
The CSS code
{background-position: x y}
allows you to place a background image x units across the web page and y units down the web page. Where “x” and “y” represent any unit you specify.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: 50px 200px
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>
Click on CSS Example to view what this code produces.
CSS allows you to easily position a background image using various combinations of the following words: top left, top center, top right, center left, center center, center right, bottom left, bottom centerand bottom right.
<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: bottom right
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>