CODEWITHSUNDEEP
htmlcssimagedoctype
Qasim
Qasim

Reputation: 1704

Images don't load when I add a doctype to my webpage

I need to add a doctype to my html webpage because IE will only format it correctly if I do so. But when I add it, some images on the page are not loading. The images are embedded with the CSS background property and displayed to the screen in divs. It doesn't load the images in all common browsers.

What could be the problem? I really do need the doctype up.

CSS:

.blue {
    position: absolute;
    background: url(blue.png) no-repeat center center;
    top: 163;
    width: 228;
    height: 434;
}

.green {
    position: absolute;
    background: url(green.png) no-repeat center center;
    top: 120;
    width: 266;
    height: 209;
}

.orange {
    position: absolute;
    background: url(orange.png) no-repeat center center;
    top: 183;
    width: 165;
    height: 291;
}

HTML:

<div class="blue"> </div>
<div class="green"> </div>
<div class="orange"> </div>

Doctype at the top:

<!DOCTYPE html>

Upvotes: 0

Views: 293

Answers (3)

Alexei Levenkov
Alexei Levenkov

Reputation: 100600

Not required, but nice to have: you are missing quotes around Url : http://www.w3.org/TR/CSS2/colors.html#propdef-background-image

background: url("orange.png") no-repeat center center;

Upvotes: 0

LINEMAN78
LINEMAN78

Reputation: 2562

The problem is that is HTML5, which like HTML4 strict requires units on values or else they are ignored. You need to add px to the end of all your position height and width numbers. Alexei is also correct in pointing out that your urls also need to have quotes around them.

Upvotes: 1

Paul Sham
Paul Sham

Reputation: 3205

I think it has to do with your CSS width and height declarations not having 'px' at the end of it.

Can you check if the <div> elements render with a width and height in order to display the background image?

Upvotes: 3

Related Questions