How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?


Tags: javascript,jquery,html,css

Problem :

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

I would like to shrink this image down such that quadrant 2 is 256x256 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?



Solution :

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(http://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


    CSS Howto..

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    CSS - How to match class (one dynamic and one static) between two elements

    CSS show elements below each other

    How to rearrange these elements with CSS?

    How to get on a single page different links based on css

    How to show indicator of loading?

    How to override CSS in joomla template

    How to access parent element in CSS? [duplicate]

    How can I force a table cell onto a new row

    How to get html elements from different class xpath?

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How to define class in CSS

    how to find a css class which has another css class as sibling

    How to choose font different font-weight? use bolder one or just font-weight?

    How to add row top and bottom margins to asp.net gridview?

    How to create responsive blocks by using just CSS and HTML

    How to add animated gif to an image sprite?

    How to split page into 4 equal parts?

    How do I align text and an image vertically inside a DIV?

    How should I toggle action links based on row hover

    How to get element by its partial class name CSS

    How to centre text as CSS content attribute vertically and horizontally?

    How to make an image resize to the screens height with CSS?

    How to make three DIV align vertical if not enough space horizontal

    How to add space after border in css

    How can i include label-info from twitter boostrap in my own class definition?

    Ribbon and stars - How to get this done without an image file?

    How to tell the code to choose between two variables and make them equal?

    How do I disable Emmet's CSS Abbreviations in Sublime Text 2