Resizing image depending on size of page

Hi,
I have found a way of using a transparent background with an image beneath it. However this has also led me to one problem. All the pages on the site are of different heights, and because this background image, in order to achieve the transparent effect, is placed as an <img> within my page it has made it hard to get this background image to stretch according to the size of the page. I have posted this in the CSS forum as I feel a bit of clever CSS programming will solve the problem but can’t quite work out how yet. If anyone has any suggestions please fire away!!

This is the basic image in my php document:

<img class="source-image" src="images/background_1.jpg" alt="">

And currently I am using this CSS for the image:

.source-image {
	width:100%;
	height:1320px;
	position:absolute;
	top:0;
	left:0;
	z-index:5000;
}

I then have a .png file which is applied over the image and allows for the transparency. What can I change to make this image stretch to always cover the page? The height is currently set to 1320px as this is the length of the longest page in the website but there are pages that are far shorter and this makes them look kind of ridiculous. If I change it to 100% it only fills 100% of the height of the browser and then if I scroll down it stays where it is and so there is white space underneath. Is there anyway I could have it move as people scroll down the page? This would be a good solution!

Thanks!
Russ

Yes, this is a known problem…but this is problematic to achieve the effect you are looking for with CSS only (keeping in mind that the end solution should be cross-browser). You may consider using a JavaScript for it.

Take a look at the bgStretcher plugin we created using jQuery…http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html.

The plug-in will automatically adjust the background you set to the size of your browser’s window (proportionally, of course). And in addition to this you may use its slideshow feature to rotate several images.

I hope this information helps. Please let me know if you have any others.

What can I change to make this image stretch to always cover the page? The height is currently set to 1320px as this is the length of the longest page in the website but there are pages that are far shorter and this makes them look kind of ridiculous. If I change it to 100% it only fills 100% of the height of the browser and then if I scroll down it stays where it is and so there is white space underneath.
The AP image will take the size from nearest ancestor that has position. It seems as that is the viewport now. You need to set position:relative on the page and also put the image in it. Then the image will take its lengths and position from the page.

Edit)
If you want a proportional sizing, just set one image dimension and the other will be sized accordingly.

If you want a proportional sizing, just set one image dimension and the other will be sized accordingly. You should try this in all major browsers (IE6 especially), and you will find the the solution is not cross-browser related.

Okay, I am trying bgStretcher right now. It seems like it will do the trick although my page is acting a little funny. I’ll let you know how it goes.

One thing though. Even bgStretcher has problems in IE6. I have just tried it and there is a massive black block if you scroll down the page. Is there a known fix for this? In all honesty, I think I have given up on IE6 so am not too worried if there is a problem but it would be nice to fix it if possible!?!

Hi, unless I missed it somewhere, can you show us the site link where this is at?

Okay,
Well I have a test copy up at http://www.uruguaynow.com/testbox/new/

Got the transparency and resizable image working but if anyone wants to have a look at the site in Internet Explorer 6.0 they will see there is a big problem at the moment.

I believe this is a problem with bgStretcher so if Darren is still about this is probably something you should know about.

I just checked with IE 6 and do not see a black block, but the content is not transparent and hides the image.

Ah, I was missing one line from the script. I know have the transparency back. However, this has brought up one more problem. Which is that not all of the links are clickable. On the navigation bar only the two buttons on the right are clickable, and you have to scroll down to be able to click the links within the main content.

Also, maybe now you will be able to see how bgStretcher does not work in IE6 if you scroll down. The image simply does not stretch and then stay in place in the way it does in all of the other browsers.

I am really thinking of skipping compatibility with IE6, but I would like to find a compromise. Ideally, I would just like the background to stretch and not have any transparency. How can I write CSS or HTML that only applies to IE6 and none of the others?

By the way, I am presuming the fact that none of the links can be clicked has something to do with this CSS:

#container {
background: none; /* can't show the png as a background image, use
proprietary property below */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alpha.png',
sizingMethod='scale');
height: 1%; /*add 'haslayout' here if required */
}

If IE6 has a pngfix on, sometimes the effect is links not clickable. This can SOMETIMES be fixe by adding position:relative; to the links :).

Then something must have slipped my mind maybe?

Please, kindly inform me of why that is not working in IE6 or cross-browser? :slight_smile:

By the way, I am presuming the fact that none of the links can be clicked has something to do with this CSS:

Yes never apply the alpha image loader to positioned elements or links become unclickable. Occasionally setting position:relative on the anchor as Ryan mentioned works but is not a full proof solution.

For IE6 you first need to position the element and then add an extra non-positioned inner element and apply the png image to this element instead. It is the only fullproof solution.

That large background image looks terrible by the way and gave me a migraine with that blurred effect. I’m hoping you are going to make it look much better than that :slight_smile:

Resizing images in that way rarely works well and to be honest I hate the effect when the image shrinks when the page is resized. I’d much prefer to ce a centralised clean image that just fades out at the edges on large screens

However you might be interested in this little trick which improves the look of resized images in IE.

Ms info on resizing images in IE:

Improve quality in IE5.5+ using the AlphaImageLoader filter.
Improve quality in IE7+ using the -ms-interpolation-mode property.