Languages
[Edit]
EN

CSS - background image position using keyword values

0 points
Created by:
Lani-Skinner
438

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

Quick solution:

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

 

Practical example

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

// ONLINE-RUNNER:browser;

<!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>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join