CSS IE7 Background

Question

I have the CSS:

.dot-preview {
    background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
}

but IE 7/8/9 don't show the image.

Called from:

<img class="dot-preview">

What is wrong with my code? It is IE bug?

Answer 1

Assigning background to empty image tag makes very little sense. Use <div> element instead and the key is to give it proper width and height:

<div class="dot-preview"></div>

And in the CSS:

.dot-preview {
    width: 300px;
    height: 300px;
    /* ... */
}

Put the correct image width and height and it should work fine.

Answer 2

Try This

HTML

<img class="dot-preview" />

css

.dot-preview {
    background:#000 url("../images/dot.png") repeat scroll 0 0;
}

Answer 3

Set a height and width to your image.

.dot-preview {
    background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
    height: 100px;
    width: 100px;
}

you might also want to have a transparent 2x2px image in the src of your image, or else IE will show a "not found" icon

EDIT:

in IE, transparent placeholders should be 2x2px wide. as they create a visual bug if they are 1px wide

Answer 4

Do the following:

HTML

<img class="dot-preview" />

CSS

.dot-preview {
    background: url("../images/dot.png") repeat scroll 0 0 transparent;
    display:block;
    width: 800px;
    height: 600px;
}

You can change the width and height as you like

Answer 5

.dot-preview {
    background-image: url("../images/dot.png");
    background-repeat: no-repeat;
    display:block;
    width: 800px;
    height: 600px;
}

Basically you should have display block for the class you want to have background-image, or you can have this whole thing in div with class .dot-preview