CODEWITHSUNDEEP
htmlcss
Gabriel Santos
Gabriel Santos

Reputation: 4974

CSS IE7 Background

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?

Upvotes: 2

Views: 1966

Answers (5)

user3013754
user3013754

Reputation: 1

Try This

HTML

<img class="dot-preview" />

css

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

Upvotes: 0

Rodik
Rodik

Reputation: 4092

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

Upvotes: 0

defau1t
defau1t

Reputation: 10619

.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

Upvotes: 0

Lion King
Lion King

Reputation: 33813

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

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 1

Related Questions