2

I am trying to stetch a div background image but not keep the aspect ratio. So I want a fixed height of 270px and a width 100% of the screen. It works perfectly in chrome but not in IE or Firefox. Here is what I have now:

CSS:

#container {
background-image: url(images/blur.jpg);
background-repeat:no-repeat;
background-size:100% 270px;
width:100%;
height:270px;
margin:0px;
padding:0px;
}

HTML:

<div id="container">content</div>

I'm a little new to all this so sorry if I am asking a really simple question!

*Update: It's all working now. I'm really not sure what happened. I checked this over and over but closing everything and then opening my source code showed that it had changed the css from background size: 100% 270px; to just 100%. Absolutely bizarre! Sorry for wasting your time.

Laraaa
  • 21
  • 1
  • 3
  • Have you tried `background-size: cover;`? That's a good one, but it does maintain aspect ratio. – Chris Baker Aug 23 '13 at 00:58
  • 1
    possible duplicate of [How do you stretch an image to fill a
    while keeping the image's aspect-ratio?](http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat)
     – Chris Baker Aug 23 '13 at 01:00
  • 1
    Your code seems to work fine for me in Firefox 22 and IE 10: http://jsfiddle.net/FFMSV/ Any particular version not working? – meub Aug 23 '13 at 01:03
  • Thanks for the suggestions guys. It seems it was a bug with notepad of all things! – Laraaa Aug 25 '13 at 23:29
  • I highly doubt there was a bug with notepad. More likely, you needed to clear your browser cache. – Chris Baker Aug 28 '13 at 21:28
  • I would think that too except it changed the code in Notepad not the browser. I originally had the background set to just 100% but changed it later. And I know it was correct, I checked it over and over. On closing and re-opening Notepad it reverted to saying just 100%. Added the 240px and it was working fine. I never would have suspected Notepad either thus why I was so stumped! – Laraaa Nov 08 '13 at 03:18

1 Answers1

0

This might be because you need to include the 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">

element

ali_m
  • 71,714
  • 23
  • 223
  • 298
jeppy7
  • 134
  • 1
  • 11