CSS and Backgrounds

CSS can be used to apply background colors and background images to different parts of a web page.

Background Colors

CSS provides the facility to apply background color or image to a single word. The property used for this purpose is background-color.

Example

<html>
<head>
	<style type="text/css">
  div {
   
    background-color: violet;
  }
  p{ background-color: yellow;}
</style>
</head>
<body>
<div>
  This 'div' has a violet background color applied.
</div>
<p>This paragraph has a yellow background color applied.</p>
</body>
</html>

Background Images

CSS also provides the facility to add an image as background to any part of the page. The property used for this purpose is background-image.

Example

<html>
<head>
	<style type="text/css">
 body{
    background-image: url("leaf.png");
  }
  
</style>
</head>
<body>
Image is applied as Background in "body" TAG.
</body>
</html>

Background Control

The style of displaying the background image can easily controlled in CSS. Different options for controlling background image are as follows:

Background Repetition

The repetition of image in the background can be controlled by using background-repeat property.

Example

<html>
<head>
	<style type="text/css">
body{
    background-image: url("leaf.png");
    background-repeat:no-repeat;
  }
  
</style>
</head>
<body>
Image is applied as Background in "body" TAG.
</body>
</html>

The above example will display the image once in the top-left of the paragraph.

The possible values are as follows. &bull: repeat-x:repeats the image horizontally for one row &bull:repeat-y:repeats the image vertically for one column.

Example

<html>
<head>
	<style type="text/css">
body{
 background-image: url("leaf.png");background-repeat :repeat-y;}
 p{color: blue; background-image: url(flower.png);background-repeat:-x;
padding: 45px;
 }
  </style>
</head>
<body>
<h1>CSS and Backgrounds</h1>
<b><p>paragraph background.....repeat-x:repeats the image horizontally for one row as shown in front of you.......</p></b>
repeat-y:repeats the image vertically for one column as shown in front of you.......
</body>
</html>

Background Attachment

Normally the background image moves when the user scrolls up or down the page Background Attachment property is used to specify the background attachment.

Example


<html>
<head>
<style>
body  {
    background-image: url("flower.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.paragraph{color:navy;}
</style>
</head>
<body>

<h3>Normally the background image moves when the user scrolls up or down the page but in this case:
Background Attachment property is used to fixed the background image.</h3>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
<p>Scroll down this page and see this effect</p>
</body>
</html>

The other value for this property is scroll that restores the default option.

Background position

The possible values are top,center,bottom,left and right.

<html>
<head>
	<style type="text/css">

body{background-image: url("flower.png");
   background-position:right bottom;}
  
</style>
</head>
<body>
<h1>CSS and Backgrounds</h1>
<b><p>paragraph background.....</p></b>
</body>
</html>

You can also specify horizontal and vertical starting points in background-position:

Example

<html>
<head>
	<style type="text/css">

 body{background-image: url("leaf.png");
   background-position:60px 20px;
background-repeat:no-repeat;}
  
</style>
</head>
<body>
<h1>CSS and Backgrounds</h1>
<b><p>You can also specify horizontal and vertical starting points in background-position</p></b>
</body>
</html>

Shorthand property

You can use the background property to set all the background properties at once.

Example

<html>
<head>
	<style type="text/css">
body{background:#7CB9E8 url("leaf.png") no-repeat right bottom;}
  
</style>
</head>
<body>
<h1>CSS and Backgrounds</h1>
<b><p>You can use the background property to set all the properties at once</p></b>
</body>
</html>

The order of the Shorthand property values for Background is:

&bull:background-color. &bull:background-image. &bull:background-repeat. &bull:background-attachment. &bull:background-position.

Chapter Next »