CODEWITHSUNDEEP
htmlcss
Carbon
Carbon

Reputation: 33

Position Background Image without inside content

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!

Upvotes: 1

Views: 43

Answers (3)

amol
amol

Reputation: 1555

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.

Upvotes: 0

Nickfmc
Nickfmc

Reputation: 379

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;
}

Upvotes: 1

James Hill
James Hill

Reputation: 61872

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.

Upvotes: 0

Related Questions