CODEWITHSUNDEEP
cssgoogle-chromefirefoxresizewidth
Jokaero
Jokaero

Reputation: 1

CSS image resizing (using width and hight) differs in Chrome and Firefox

I'm a bit confused. I try to resize an image using CSS. While in Safari and Chrome the image resizes, in IE and Firefox it keeps it's original size but crops. What do I need to change to have it resized in FF and IE as well? CSS looks as follows:

body {
    background-color:black;
    width: 100%;
    height: 100%;
}

#image1 {
    background-image: url(img/myimage.png);
    background-size: 100% 100%;
    position: absolute;
    width: 532px;
    height: 250px;
    top: 100px;
    left: 100px;
}

and the body:

<body> <div id='image1'></div> </body>

Upvotes: 0

Views: 2913

Answers (3)

Truc
Truc

Reputation: 9

I've also tried your code in Firefox (17.0.1 -- OSX).

With and without

<!DOCTYPE html>

the image actually resizes as expected.

You sould check for typos in your CSS I guess.

Upvotes: 1

Kenneth Kj&#230;r Nielsen
Kenneth Kj&#230;r Nielsen

Reputation: 55

Try making the background position fixed, and then add this to your html.

<img src="img/myimage.png" alt="background image" id="image1" />

Upvotes: 0

Jen
Jen

Reputation: 584

I think you're missing a % or px in

background-size: 100% 100;

I've tested this jsfiddle in Chrome, IE, and Firefox with good results. I also added no-repeat in case there is a need to scale smaller images up.

Upvotes: 0

Related Questions