Display a specific block from an image

Question

I have an image (example.png) divided in n times m blocks, and consider this class:

.myFullImg{
   background: url(example.png);
}

I want to create a div in which i show in his background just a specific block:

<div class="myFullImg" style="..."></div>

I don't know what to put in style above ?

Example: the image image.png had: height:150px and width:100px.

Then i have 6x4=24 blocks in this image with height:25px and width:25px

And i want in a div to display a block from the image image.png

Thank you for your help

You want to set a width and height on the div, then adjust the `background-position` property of the background image to match the image you want. — j08691, Oct 01 '19 at 14:32

score 3 · Accepted Answer · answered Oct 01 '19 at 14:34

Set the div's width and height to 25px and make use of the background-position property with negative values in steps of 25 pixels. So in order to show the 6th block (from the top left), you would set the values like this:

.myFullImg{
   background: url("https://placekitten.com/100/150");
   background-position: -25px -25px;
   width: 25px;
   height: 25px;
   overflow: hidden;
}

<div class="myFullImg"></div>

Display a specific block from an image

1 Answers1