codescracker


css

CSS Background Position



« Previous Tutorial Next Tutorial »


The background-position Property

The background-position property sets the position of a background image on a Web page. This property is used along with the background-image property.

You can set the position of an image by performing any of the following tasks:

(i) Representing position in pixels, as shown in the following code fragment:

body
{
	background-image: url('pic.jpg');
	background-position: 200px 200px;
}

(ii) Representing position in percentage, as shown in the following code fragment:

body
{
	background-image: url('pic.jpg');
	background-position: 50% 50%;
}

(iii) Representing position by words, such as left, right, and center, for x-axis, and top, down, and center for y-axis, as shown in the following code fragment:

body
{
	background-image: url('pic.jpg');
	background-position: left bottom;
}

In the preceding code fragment, the position of the background image is set using the left bottom value.

Background Image Positioning Example

Here is an example, shows how to position background image using background-position property available in CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Background Position Example</title>
	<style>
		body
		{
			background-image: url("nature.jpg");
			background-repeat: no-repeat;
			background-position: right top;
		}
	</style>
</head>
<body>

<h2>CSS Background Position Example</h2>
<p>This is background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>

</body>
</html>

Here is the sample output produced by the above CSS background position example code:

CSS Background Image Position

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test