CSS Background Position

You are currently viewing CSS Background Position

By using the CSS Background Position properties you can also specify the position of the background image relative to the element behind which it is applied. The possible values are top, center, bottom, left and right. And also you can specify the position of the background the percentage value like 20%, 50%, etc.


We can specify one and more than one position value of the background-position property. And when the CSS Background Position property has more than one position values
then separated by commas, like as below.

background-position: 0 0, center;

CSS Background Position has three different types of values:

  • Length values (150px 50px 10px)
  • Keywords (top right left)
  • Percentages (10% 50% 100%)

CSS Background Poition default value are 0 0 and by default its place your image top left postion of the container.

CSS Background Position Demo 

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

background-position: right 35% bottom 45%;

Some Syntax of the CSS background Position show as below

/* <percentage> values */
background-position: 20% 80%;

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <length> values */
background-position: 0 0;
background-position: 5cm 3cm;
background-position: 12ch 5em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 100px right 80px;
background-position: right 4em bottom 60px;
background-position: bottom 15px right;
background-position: top right 90px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

Example

In this Example has three different containers with a yellow background and a start image. And these three containers showing with different positions of the image.

HTML

<div class="exampleone">Container One</div>
<div class="exampletwo">Container Two</div>
<div class="examplethree">Container Three</div>

CSS

/* Shared among all <div>s */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       right 3em bottom 2em;
}

OUTPUT

css background position

Reference

If you want to learn more about CSS visit the official website: Visit

visit the CSS tutorial list. And make strong your CSS concept. Click here. wuschools.com is always written about the CSS concept for the CSS lover. Ang writes about how CSS makes your life easy if you are a web site developer. We help you to continue your learning.

Leave a Reply