0

I need to be able to stretch a image background to fit the window size now it works in all browsers except for ie6 I have endlesly searched the internet for a solution and tried all things I have found but nothing seems to work in ie6

here is my demo site if you have ie6 you will be able to see my problem I need it too stretch the full width and height with out it distorting the image at all

http://demo.jigsawfinance.com/

any one know a solution that will work I have the img tag etc but still no avail

for those without ie6 here is a capture of the screen veiw

alt text

as you can see I have alot of white space where the image is supposed to expand too

Michael Eakins
  • 4,149
  • 3
  • 35
  • 54
sam
  • 164
  • 12

3 Answers3

2

Have a look at this: Stretch and scale a CSS image in the background - with CSS only

also this layout seems to work in IE6: http://www.cssplay.co.uk/layouts/background.html

Community
  • 1
  • 1
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • thankyou i had looked at this previously it does not work for me in ie6 :( – sam Oct 27 '10 at 10:39
  • that just places the image in the center but not the whole background – sam Oct 27 '10 at 10:42
  • yes i tried both the second one kind of works but it distorts the background – sam Oct 27 '10 at 11:10
  • how can you fill the whole browser but not alter the aspect ratio of the image? i.e either the image has to distort, or the image has to stretch one dimension to fit either width or height and the other to be larger and get cut off. – Moin Zaman Oct 27 '10 at 12:03
1

There is a way for CSS 3 to do this but since IE6 does not support it, I think your best bet is to use the img tag.

e.g.

<img src="../images/jigsaw_logo.png" style="width: 100%; position: absolute; top: 0; left: 0; z-index: -1;"/>

This will retain the proportion of your image and move it back.

Also take note that in IE's css, you can specify expressions, so try the one below if you're having trouble with the normal 100% css width:

width: expression(document.body.clientWidth + 'px');
Manny
  • 6,277
  • 3
  • 31
  • 45
  • thanks i just tried that but still ie6 it does not stretch the img to full size of the window :( – sam Oct 27 '10 at 11:07
  • can you try on a clean html? What do you mean full size of the window? The image does not stretch at all? This can be caused by margins / paddings. I tried it in IE6 and it works. – Manny Oct 27 '10 at 11:13
  • ok it works in a clean sheet but i have a red cross in the corner i dont understand why it wont work on my pages? – sam Oct 27 '10 at 11:18
  • ok it works but if you move the window from the side the image shrinks back to its origanal size – sam Oct 27 '10 at 11:32
  • adding height 100% fixes that but then it distorts the image :S – sam Oct 27 '10 at 11:33
  • height 100% will surely distort the image. Where did you add the image, try adding it directly after the body tag. E.g.
    – Manny Oct 27 '10 at 11:39
  • i tried adding min-width and min-height too but ie6 doesnt seem to render this – sam Oct 27 '10 at 11:39
  • this is where i placed it Home – sam Oct 27 '10 at 11:41
  • has no effect in ie6 when i add it to my real page either – sam Oct 27 '10 at 11:48
  • add for ie6 to remove the margins. – Manny Oct 27 '10 at 11:49
  • stretched it about 10pixels maybe the img seems to expand to the size of the actual container only – sam Oct 27 '10 at 11:52
  • In you clean html, the container is the body right? Then try to use – Manny Oct 27 '10 at 11:56
  • nope as soon as i resize the window from the side the image shrinks in height and leaves alot of white space – sam Oct 27 '10 at 11:58
  • Is your browser's autoresize ON ? Tools -> Internet Options - > Advanced tab -> under Multimedia -> Enable Automatic Image Resizing – Manny Oct 27 '10 at 12:04
  • ok i guess i will take your way and work around the bit of white space at the bottom until i find a better solution thankyou for your time today – sam Oct 27 '10 at 12:38
  • but i think its something to do with my css – sam Oct 27 '10 at 12:58
  • it appears to be the my container width that stops it from expanding to full wiondow size – sam Oct 27 '10 at 13:00
  • 1
    take note that in IE, you can also force expressions e.g. width: expression(document.body.clientWidth + 'px'); <-- this will force the image's width to expand. – Manny Oct 28 '10 at 02:02
1

Image stretching with no quality loss for IE6:

<div Style="Position:Relative; Width:2000px; Height:1500px;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
Src='C:\SomePic.jpg',SizingMethod='scale');"></div>
MPS
  • 11
  • 1