[Edit]

CSS - background image position using keyword values

1 contributors

2 contributions

0 discussions

0 points

Created by:

Lani-Skinner

748

In this article, we would like to show you how to set background image position using keyword values in CSS.

Quick solution:

xxxxxxxxxx
 
div {
  background-position: top;  /* example value */
}

Practical example

Edit

In this section, we use keyword values such as top, right, bottom and left to set the image position.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    body {
      display: flex;
    }
​
    div {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      margin: 5px;
      /* background properties */
      background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
      background-size: 50px;
      background-repeat: no-repeat;
    }
​
    .top {
      background-position: top;
    }
​
    .right {
      background-position: right;
    }
​
    .bottom {
      background-position: bottom;
    }
​
    .left {
      background-position: left;
    }
​
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="left"></div>
</body>
</html>