The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.


Is a <position>, that is one to four values representing a 2D position regarding the edges of the element’s box. Relative or absolute offsets can be given. Note that the position can be set outside of the element’s box.

<title>CSS Tutorials</title>
.exampleone {
	background-image: url("logo.png");
	background-position: top;

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;

.examplethree {
	background: url("logo.png") 2cm bottom;
	<div class="exampleone">first text</div>
	<div class="exampletwo">Second text</div>
	<div class="examplethree">Third text</div>

You may also like...