css background position

The CSS background position property is used to set the position of the background image inside the HTML. With the CSS background position property, you can set the image to a container or anywhere inside the box. Below are some examples that you will know how to position a background image in CSS.

.myimage {
	background-image: url(/my-image.jpg);
	background-position: center;
	background-repeat: no-repeat;
	padding: 200px;
}

<div class="myimage">
	<h1>This is dummy text</h1>
	<p>Yes, This is dummy text</p>
</div>

You can apply for CSS background position in many ways like with Keyword value, percentage value, and offset value. Let’s know one by one how you will use all the positions.

/ ***** css background position from right ***** /

.myimage {
	background-image: url(/my-img.jpg);
	background-position: right;
	background-repeat: no-repeat;
}

/ ***** css background position from left ***** /

.myimage {
	background-image: url(/my-img.jpg);
	background-position: left;
	background-repeat: no-repeat;
}

/ ***** css background position from top ***** /

.myimage {
	background-image: url(/my-img.jpg);
	background-position: top;
	background-repeat: no-repeat;
}

/ ***** css background position from bottom ***** /

.myimage {
	background-image: url(/my-img.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
}

/ ***** css background position from center ***** /

.myimage {
	background-image: url(/my-img.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

Other CSS Background Position Example

.myimage {
	background-position: bottom 30px right 50px;
	background-position: top right 40px;
	background-position: 35% 65%;
	background-position: 25ch 15em;
	background-position: right 50px bottom;
	background-position: initial;
	background-position: unset;
}

CSS Background Image Fixed Position

If you want to fix the position of your background image, then for that you have to follow the example given below. Let’s know how to use a CSS background image fixed position property.

.myimage {
    background-image: url(/my-img.jpg);
    background-repeat: no-repeat;
    padding: 200px;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

<div class="myimage">
	<h1>This is dummy text</h1>
	<p>Yes, This is dummy text</p>
</div>

All Background Position Property

  • left center
  • center bottom
  • right center
  • right bottom
  • left bottom
  • 100px 300px
  • center top
  • 50% 50%
  • center center
  • left top
  • 35px 65px
  • right top
  • 35% 65%

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With the u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is text formatting in HTML?
To make the text appear well, the text is formatted with a few HTML tags.

What is BR tag?
br tag is used to break the line.

What is the HTML code for bold?
You can use b tag and strong tag to bold your text.

What does </ B mean in HTML?
b tag means “bold”.

Note: All the examples you have seen inside this article have all been made by us and tested thoroughly. So you can use all these without any difficulty.

Related: Easiest example of applying HTML background color and image