1

Good afternoon stackoverflow community,

I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.

I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.

Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.

.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}   

http://jsfiddle.net/PatrickBDC/HaGNa/

Is there a way to show that background, the same exact size but without the text?

Thank you very much!

3 Answers 3

1

You need to have a width for your div as well if the div is empty. try something like this

.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}   
0
0

If you would like your div to display without content, you need to specify width in your CSS:

.icon {
        float: left;
        background-color:#6495ED;
        background-position: 0 0px;
        height: 29.2px;
        width: 50px;
    }   

Here is a working fiddle.

2
  • Thank you very muck James Hill! Thanks for the attention! It fits perfectly
    – Carbon
    Commented Jul 11, 2014 at 20:03
  • I'm gathering reputation, when I'm 15 I'll upvote you for sure! :)
    – Carbon
    Commented Jul 11, 2014 at 20:10
0

Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.