Background position

In this article we are going to learn about background position property with values left top, left bottom, left center, right top, right bottom, right center, center top, center bottom and center center in css, how to position the background image.

We learnt about css in general, text align in css, table style in css, text shadow in css, letter spacing in css, word spacing in css, text transform in css, text decoration in css, background image in css and background image repeat in css so, we will be focusing on background position property.

Background position

Background position is a Cascading Style Sheet property used to place or position background image with values left top, left bottom, left center, right top, right bottom, right center, center top, center bottom and center center if the image is not repeated.

left top

It is a value of background position used to place background image on the left top of an html element.

Let us create a div element with left top value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: left top;

}

</head>

<body>

<div class="background-position-example">This is a div element with left top value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with left top value of background position added.

left bottom

It is a value of background position used to place background image on the left bottom of an html element.

Let us create a div element with left bottom value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: left bottom;

}

</head>

<body>

<div class="background-position-example">This is a div element with left bottom value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with left bottom value of background position added.

left center

It is a value of background position used to place background image on the left center of an html element.

Let us create a div element with left center value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: left center;

}

</head>

<body>

<div class="background-position-example">This is a div element with left center value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with left center value of background position added.

right top

It is a value of background position used to place background image on the right top of an html element.

Let us create a div element with right top value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: right top;

}

</head>

<body>

<div class="background-position-example">This is a div element with right top value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with right top value of background position added.

right bottom

It is a value of background position used to place background image on the right bottom of an html element.

Let us create a div element with right bottom value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: right bottom;

}

</head>

<body>

<div class="background-position-example">This is a div element with right bottom value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with right bottom value of background position added.

right center

It is a value of background position used to place background image on the right center of an html element.

Let us create a div element with right center value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: right center;

}

</head>

<body>

<div class="background-position-example">This is a div element with right center value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with right center value of background position added.

center top

It is a value of background position used to place background image on the center top of an html element.

Let us create a div element with center top value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: center top;

}

</head>

<body>

<div class="background-position-example">This is a div element with center top value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with center top value of background position added.

center bottom

It is a value of background position used to place background image on the center bottom of an html element.

Let us create a div element with center bottom value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: center bottom;

}

</head>

<body>

<div class="background-position-example">This is a div element with center bottom value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with center bottom value of background position added.

center center

It is a value of background position used to place background image on the center or middle of an html element.

Let us create a div element with center center value of background position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: center center;

}

</head>

<body>

<div class="background-position-example">This is a div element with center center value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with center center value of background position added.

Percentages and pixels

We can also use percentages (%) or pixes (px) as values of background position to place background image where we want on the html element.

Let us create a div element with percentages value of background image position property applied, copy and paste below code.

<!DOCTYPE html>

<head>

<style>

.background-position-example {

background-repeat: no-repeat;

background-position: 50% 50%;

}

</head>

<body>

<div class="background-position-example">This is a div element with percentages value of background position added.</div>

</body>

</html>

So, we should have the following results.

This is a div element with percentages value of background position added.

Conclusion

In this article we learnt about background position property with values left top, left bottom, left center, right top, right bottom, right center, center top, center bottom and center center in css with examples, how to position the background image.