I am preparing my sprite by reducing the dimensions of the image. Successfully I prepare the sprite and load complete sprite on the web page using flex property. Problem 1: But when I want to scale up the dimension of second image from 100x100 px to 300 x 300px and want to display in the div just 2nd image then I am unable to resize the dimensions whole sprite disappear.
Problem2: When I change the position of the sprite then it will cut the sprite images. Here is a code to load the whole sprite.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us Sprite</title>
<style>
body {
background-color: grey;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width:100%; /* Ensure the body takes up the full viewport height */
margin: 10 0 10 0px; /* Remove default margin for body */
}
/* Set the dimensions for the container and adjust the background-position */
.group4 {
background-image: url('Group 4.png');
background-repeat: no-repeat;
/* */
width:506px;
height:413px;
background-position: 0 0;
}
.about{
width:300px;
height:300px;
background-position: 300 300;
}
</style>
</head>
<body>
<!-- About Us Section -->
<div class="group4"></div>
<!--Display 3rd image from 1st row-->
<div class="about"></div>
</body>
</html>
</head>
<body>
</body>
</html>`
Please modify my for about div, I want to display 3rd image from 1st row changing its dimension from 100x100 to 300x300px. How can I calculate the background-image position for the 3rd image and display it scaling up its dimensions.
