CSS - background image position using keyword values

0 points
Created by:

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>
    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 {
      background-position: top;

    .right {
      background-position: right;

    .bottom {
      background-position: bottom;

    .left {
      background-position: left;

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


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.

❤️💻 🙂