❮❮ PREV NEXT ❯❯

CSS - Background Position

With the background-position property of CSS, you can set the position(Left, right, top,bottom e.t.c) of the background image.

Background position as Center for the Background Image

Example :

<html>
<head>
	<style>
		body {
  			background-image: url("my_image.png");
            background-repeat: no-repeat;
            background-position: center;
  		}
	</style>
</head>

<body>
	<p>
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output, the image is placed at the center of the HTML page.It is because we have set the value of the background-position property to center.

<style>
	body {
		background-image: url("my_image.png");
		background-repeat: no-repeat;
		background-position: center;
	}
</style>

Background position as Top Right for the Background Image

Example :

<html>
<head>
	<style>
		body {
  			background-image: url("my_image.png");
            background-repeat: no-repeat;
            background-position: top right;
  		}
	</style>
</head>

<body>
	<p>
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output, the image is placed at the top right of the HTML page.It is because we have set the value of the background-position property to top right.

<style>
	body {
		background-image: url("my_image.png");
		background-repeat: no-repeat;
		background-position: top right;
	}
</style>

Similarly, there are other values for background-position property that we have defined below.

background-position	Description
center top	Places the image at the top center of the HTML page
center bottom	Places the image at the bottom center of the HTML page
right top	Places the image at the right top of the HTML page
right center	Places the image at the right center of the HTML page
right bottom	Places the image at the bottom right of the HTML page
left top	Places the image at the top left of the HTML page
left center	Places the image at the left center of the HTML page
left bottom	Places the image at the left bottom of the HTML page

Just note if you provide only one word for the value of the background-position, the other value would be center by default.

For example, if you specify the value of background-position as left. The actual value would be left center by default.

❮❮ PREV NEXT ❯❯