Languages
[Edit]
EN

CSS - position background image in corners

0 points
Created by:
Zayyan-Todd
560

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

Quick solution:

.bottom-right {
  background-position: bottom 0 right 0;  /* bottom right corner */
}

 

Practical example

To move the image to the specific corner, you need to set the distance from the corner you want to 0 (e.g top 0 left 0 - default value).

// 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-right {
      background-position: top 0 right 0;
    }

    .bottom-right {
      background-position: bottom 0 right 0;
    }

    .bottom-left {
      background-position: bottom 0 left 0;
    }

  </style>
</head>
<body>
  <div></div>
  <div class="top-right"></div>
  <div class="bottom-right"></div>
  <div class="bottom-left"></div>
</body>
</html>

Note:

We don't need to set the top-left corner, since it's background-position default value.

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