July 2, 201016 yr Hi all, Just joined!! I am experimenting with having a background image on a page. I achieved this ok but all along I was testing it in my default browser (chrome) and it worked perfectly. However, I just looked at it in IE and image scales horizontally but not vertically. Here is my CSS: (I have included it all in case there is something small that interferes with it) body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #333; } #imagewrapper { height: 100%; width: 100%; z-index: 0; } #main { position:absolute; width:432px; height:435px; z-index:1; left: 81px; top: 224px; border-right: thin #FFF; border-left:thin #FFF; padding: 5px; cursor: crosshair; background-color: #000; filter:alpha(opacity=60); opacity:0.6; } #maintext { position: relative; width: 425px; height: 425px; z-index: 2; } p { font-family: "Century Gothic"; font-size: 15px; font-style: normal; line-height: 20px; color: #FFF; text-align:justify; } Ok, now here is the HTML part: <body> <div id="imagewrapper"> <img src="images/office.jpg" width="100%" height="100%" /></div> <div id="main"> <div id="maintext"> <p>text text text</p> </div> </div> </body> </html> As I said it works perfectly in Chrome, Safari but not so in IE and Firefox. Is there something I can add to this to fix the issue? Thanks in advance!
July 2, 201016 yr If you code width: 100%; and height: 100% the image will be distorted as browser windows probably won't be the same proportions as the original image. If you don't want to use a background-image (which won't expand/contract to suit a browser window) see this:- http://www.wickham43.net/backgroundfullwidthflexible.html which doesn't state a height, so the height adjusts in proportion to the width.
July 2, 201016 yr Author If you code width: 100%; and height: 100% the image will be distorted as browser windows probably won't be the same proportions as the original image. If you don't want to use a background-image (which won't expand/contract to suit a browser window) see this:- http://www.wickham43.net/backgroundfullwidthflexible.html which doesn't state a height, so the height adjusts in proportion to the width. Thanks for that! It kinda worked!! It got rid of the scroll bar but the image doesn't scale to fit the window vertically!
July 2, 201016 yr As I said in my first post, you shouldn't make an image fit in both directions because it will be distorted (unless that's what you want).
July 2, 201016 yr Author As I said in my first post, you shouldn't make an image fit in both directions because it will be distorted (unless that's what you want). I don't mind the distortion actually. It doesn't looks so bad and its just an experiment, not a site I will be putting live. Unless I get a suitable solution to this issue. As I said it works perfectly in chrome and safari!
July 3, 201016 yr Oh for the love of god: position: fixed; sorted it out!!! I have literally just did this for a site lol! But now looking at incorporating a flash xml slideshow background rather than the one image. I used #background { position : fixed; width : 100%; height : auto; } This meant the image will stay in proportion by using the width 100% along site height auto!
July 3, 201016 yr Author I have literally just did this for a site lol! But now looking at incorporating a flash xml slideshow background rather than the one image. I used #background { position : fixed; width : 100%; height : auto; } This meant the image will stay in proportion by using the width 100% along site height auto! Great stuff!! The whole learning process is actually quite fun! Very satisfying to see things work the way you want when you preview in your browser!
Create an account or sign in to comment