CODEWITHSUNDEEP
htmlcss
ckv
ckv

Reputation: 10830

Background image not appearing in CSS, but works in img tag

I have an img tag which shows an image. This comes up fine. In the same file i have a div with a class having a background image with same url and same file. The img works but not the CSS background.

<img src="../../Content/Themes/Default/images/DeleteIcon.jpg" />

#droptarget
{
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background: url('../../Content/Themes/Default/images/DeleteIcon.jpg') no-repeat 140px 102px;
}

Upvotes: 1

Views: 1952

Answers (3)

Arbaoui Mehdi
Arbaoui Mehdi

Reputation: 802

You can also using background-image and background-repeat like this:

#droptarget {
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background-image: url('../../Content/Themes/Default/images/DeleteIcon.jpg');
    background-repeat: no-repeat;
}

And if you have background-position inherited from other element, you can add:

#droptarget {
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background-image: url('../../Content/Themes/Default/images/DeleteIcon.jpg');
    background-repeat: no-repeat;
    background-position: 0 0;
}

Upvotes: 0

frogatto
frogatto

Reputation: 29285

Use 0 0 as background position:
jsFiddle:here

Upvotes: 2

samrap
samrap

Reputation: 5673

Get rid of your x and y coordinate offset. Its pushing it out of the div. 

 background: url('../../Content/Themes/Default/images/DeleteIcon.jpg') no-repeat;

Upvotes: 1

Related Questions