CSS - position background image in corners

0 points
Created by:

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>
    body {
      display: flex;

    div {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      margin: 5px;
      /* background properties */
      background-image: url('');
      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;

  <div class="top-right"></div>
  <div class="bottom-right"></div>
  <div class="bottom-left"></div>


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


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.

❤️💻 🙂