Open In App

How to Set Offset of Background Image from Right using CSS ?

Last Updated : 03 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, you can see the ways by which you can set the offset of a background image from the right using CSS.

The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the background image is starting. This property takes the one or two values of positioning including the position direction and also the space from the specific direction.

For example, top value right value, or left value bottom value

Syntax:

// We can also give two values at the same time
background-position: value;

Note: We can also give two values at the same time.

Property used:

  • background-position: This property is used to specify the positioning of the background image of an element. We can specify the spacing of the image from either one or two adjacent sides of an element. 

Example 1: The code below demonstrates how we can offset a background image to the right using CSS by the background-position property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
          Offset a background image from the right using CSS
      </title>
    <style>
        .container {
            width: 16rem;
            height: 12rem;
            margin: 3rem;
            padding-bottom: 5rem;
            border: 1px solid #ccc;
            background-image: url(
            background-size: cover;
            background-repeat: no-repeat;
            background-position: right 60px top 0;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
          GeeksforGeeks
      </h1>
    <h3>
          Offset a background image from the right using CSS
      </h3>
    <div class="container"></div>
</body>
  
</html>


Output:

Screenshot-2023-05-27-195322.png

Example 2: The code demonstrates how we can add the values of the positioning of the background image using the calc() function within the background-position property CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Offset a background image from 
        the right using CSS
    </title>
    <style>
        .center {
            text-align: center;
        }
  
        .container {
            display: flex;
        }
  
        .box-1 {
            width: 16rem;
            height: 14rem;
            margin: 3rem;
            border: 1px solid #ccc;
            background-image: url(
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 
                right calc(80% + 40px) top calc(90% + 50px);
        }
  
        .box-2 {
            width: 16rem;
            height: 14rem;
            margin: 3rem;
            border: 1px solid #ccc;
            background-image: url(
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 
                left calc(80% + 40px) bottom calc(90% + 50px);
        }
    </style>
</head>
  
<body>
    <h1 style="color: green" class="center">
        GeeksforGeeks
    </h1>
    <h3 class="center">
        Offset a background image from 
        the right using CSS
    </h3>
    <div class="container">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
</body>
  
</html>


Output:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads