CSS Image

Images can be set in your web page by using different CSS commands. We will discuss them here.

Set Background Image

You can set the background as an image of your choice. All you need to know is the url of that image. The image will be specified in the tag. Example:

<html>
<head>
<style type="text/css">
body {background-image: url('images/70.jpg'); color: white}
</style>
</head>

<body>
The background image has been set
</body>
</html>

Output:

The background image has been set

Repeat Background Image

By using the background-repeat property, you can repeat background image either horizontally, vertically or both directions. The values of background-repeat property are given below:
repeat: The background image will be repeated horizontally and vertically.
repeat-x: The background image will be repeated horizontally.
repeat-y: The background image will be repeated vertically.
no-repeat: The background image will be displayed only once.
The background-repeat is used along with background-image.
Example:

<html>
<head>
<style type="text/css">
body {background-image: url('images/moon.jpg'); color: white;
background-repeat: repeat}
</style>
</head>

<body>
The background image has been set
</body>
</html>

Output:

The background image has been set

Fix Background Image

The background image can either be fixed or scroll down naturally. The background-attachment property ensures this. If the value of this property is set to scroll, the background image will move as the page scrolls. If the value is set to fixed, the background image does not move as the rest of the page scrolls.
Example:

<html>
<head>
<style type="text/css">
body
{ background-image:url('images/moon.jpg');
background-attachment:fixed }
</style>
</head>

<body>
The image will remain fixed
</body>
</html>

Output:

The image will remain fixed

Note: This property works properly in Internet Explorer 6.0 but may not work properly with many browsers.

Position Background Image

By using the background-position property, you can define the starting position of the background image. The values can be top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right. If you specify only one keyword, the other keyword will be center by default. By default, the value is 0 0.
Example:

<html>
<head>
<style type="text/css">
body
{ 
background-image:url('images/moon.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left
}
</style>
</head>

<body>
The image will be in top left
</body>
</html>

The background image will be placed in top left position of the web page but remember background-attachment property has to be set to fixed to work properly in Mozilla.
The image position can be specified in pixels or as a percentage. The value is specified as (x,y) where x is horizontal position and y is vertical position.

All Properties in one Heading

All the above properties can be specified in one single declaration, i.e. background.
Example:

<html>
<head>
<style type="text/css">
body
{ 
background: url('images/moon.jpg') fixed repeat
}
</style>
</head>

<body>
</body>
</html>

Output:

CSS Tutorial

CSS Image

Set Background Image

Repeat Background Image

Fix Background Image

Position Background Image

All Properties in one Heading

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'