Home/ Questions/Q 7072411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:48:20+00:00

I have an image that is 1024×1024 and is divided into 4 quadrants: I

  • 0

I have an image that is 1024×1024 and is divided into 4 quadrants:
image with four quadrants

I would like to shrink this image down such that quadrant 2 is 256×256 and mask out, or hide, the other 3 quadrants such that it is only visible on the page. Like this:

resized masked image

How can this be done? Is it possible with pure CSS or is js needed along the way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming the browsers you’re targetting (FF4+, IE9+, Safari 4.1+ Chrome 3+) can use the background-size CSS property, then you can do this in CSS alone:

    .bg {
    background-image: url(https://i.stack.imgur.com/HQaif.jpg);
    background-repeat: no-repeat;    
    background-size: 203%;
    background-position: top left; 
    width: 256px;
    height: 256px;  
}

    If you remove the red keyline between each section then the size property can be made 512px and it would make the calculation easier, should you need to resize again in future.

    Example fiddle

    More information on background-size

    • 0