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