Take the 2-minute tour ×

For example I have a big image 500x500 and I have a small square 100x100.

I don't want the big image to resize, so how could I show it cutted?

If I risize, it would stay like this:


If I cut it, only the bold thing would happear:


share|improve this question
+1 to overcome the -1 vote. Some people are dump and don't read questions carefully and instantly answer with diarrhea. –  Ahmad Alfy Jun 24 '13 at 8:10
ahhahaaa yeaa.. –  John Balls Jun 24 '13 at 8:13
add comment

5 Answers

up vote 2 down vote accepted

If you want, you can use background-image property using CSS, and than use background-position to set the image accordingly

Assuming you have an element of say, 100px x 100px and an image with dimensions 300px x 300px


<div class="demo"></div>


div.demo {
   background-image: url('PATH_TO_IMAGE');
   background-position: 30px 100px; 
   background-repeat: no-repeat; /* Just to be sure it won't repeat, 
                                    even if you resize the element*/
   /* 30px - X Axis, 100px - Y Axis */
share|improve this answer
Nice idea, thanks –  John Balls Jun 24 '13 at 7:52
@JohnBalls You welcome :) –  Mr. Alien Jun 24 '13 at 7:58
You can automate the process using jQuery and adding a special class for these kind of images. Replace the src attr with a transparent gif and use jQuery to apply the background from the original source. –  Ahmad Alfy Jun 24 '13 at 7:59
@AhmadAlfy Why complicate? :p –  Mr. Alien Jun 24 '13 at 7:59
If it's a single image then it wont be necessary. But 99% of similar questions I have seen is people working with CMSs that generate that markup for them and now they have to transform it to something else and they have no control or little experience to modify the generated output :) Of course add to have a chance to chit chat with @Mr.Alien to the list :D –  Ahmad Alfy Jun 24 '13 at 8:02
show 1 more comment

easy way to do this is

html :

<div id="myimg"></div>


        backgroung-image: url("myimg.png");
        background-repeat: no-repeat;
share|improve this answer
You could read the other answers before answering the same thing –  John Balls Jun 24 '13 at 7:57
I think everybody answered almost at the same time –  jackchuka Jun 24 '13 at 8:00
add comment

may i sure try this html source

<div class="cropimg">

try this css source :

    width: 100px ;
    height: 100px;
    overflow: hidden;

.cropimg img {
    width: 500px;
    height: 500px;
    margin: -75px 0 0 -100px;
share|improve this answer
What is the img margin for? –  John Balls Jun 24 '13 at 7:59
add comment

You can give the width and height for that image


share|improve this answer
Come on, focus on the answer --' –  John Balls Jun 24 '13 at 7:57
Is it useful to u? –  manoranjani.a Jun 25 '13 at 9:36
add comment

You can apply your image as a background to some element, and fix width/height of that element.


#pic {
    background: url('pic_url');
    width: 300px;
    height: 200px;
share|improve this answer
add comment

Your Answer


