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 to Make an OS X Style Search in XHTML/CSS

    Find how an element's css has changed after jQuery “toggle” function has been used

    How to set div to display in only one line?

    how to make my HTML 'font' edge color match with background on css?

    How to loop animated text banners using css keyframes

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to close this menu clicking outside?

    How to apply css to all the divs in hierarchy in HTML?

    How to get rid of space and align two objects in one line in css/html?

    How to set css to more selectors when one of it is $(this)?

    How can I align a text that has a specific width at the center of a div?

    how to access the class css properties from an attribute directive associated with the same element

    How to center modal window in css+html?

    GTK+ 3 CSS: How to specify text alignment for a label?

    How to change CSS of ng-view when triggering CSS in ng-include

    How can I join background images?

    How to set outline without using CSS outline property?

    How to override css for giving background image?

    How to make an infinite horizontal container with fixed height

    how to show one element under the other one?

    How can I set a default pseudo styles in my css?

    CSS show div background image on top of other contained elements [duplicate]

    How do I select all elements of a specific class name?

    How to style author id in WordPress?

    How to fix text with limited height and absolute position overflows

    How to repeat a CSS shape horizontally?

    How to manually override CSS @media queries?

    How to build the whole web site from css design [closed]

    How to style Anchor in GWT?

    How to get a CSS selector using Selenium WebDriver?