Log in

View Full Version : newbie question: resizing backgrounds


Malco
05-15-2009, 06:41 AM
Hi

I really don't know much about flash or swf files but in updating my portfolio I came across Polaroid gallery. I have managed to update the background jpeg with my own picture and remove the fade effect. However in the original program the background was tileable so when seen in a full screen browser looked fine.

As my picture is not tileable I would like to know if it is possible to scale the background or the whole swf object without tiling the background.

Thank you for any help you can give
forum_amnesiac
05-15-2009, 08:21 AM
If your background image is a static file, eg .gif, jpg, etc. I know a way that scales the background to fit the window.

There is a proviso to this, it will lose resolution if the original is too small.

In the header section, or adapt for a CSS file :-

<style type="text/css">
#background_image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
}

#page {
position: absolute;
top: 0px;
left: 2px;
z-index: 2;
height: 100%;
width: 100%;
overflow: auto;
}
</style>

Immediately after <body> put this

<img src="myimage.jpg" alt="my background" id="background_image">

and then wrap the rest of your code in this div


<div id="page">
Rest of my body code
</div>

You may be able to adapt this to fit your requirements, it may be possible to replace the 'img src' above with a swf.

However, for static pages, most people actually make their background image larger and let HTML/CSS resize it automatically to fit the screen size
Malco
05-15-2009, 12:24 PM
Thank you very much for your reply, I have spent some time playing around with the files now and although that wasn't quite what I was looking for I realised that it could be a work around.

After adding the transparent parameter, removing the background from the swf and setting the two IDs to different z layers it appeared to be working. Unfortunately the z layers (or maybe position absolute?) seems to affect the swf and double clicking no longer enlarges the images :confused:



<img src="background.jpg" alt="my background" id="background_image">
<div id="fullscreendemo">
<strong>This site requires Flash Player 8.0 or greater</strong><br />
Please click <a href="http://www.adobe.com/products/flashplayer/">here</a> to download.<br />
If you are sure you have the required version, press this link: <a href="readme.html?detectflash=false">bypass the detection</a>.
</div>
<script type="text/javascript">
//<![CDATA[
var so = new SWFObject("polaroid.swf", "polaroid", "100%", "100%", "8", "#FFFFFF");
// specify the url to the xml-file, default is photos.xml
so.addVariable("xmlURL","photos.xml");
so.addParam("wmode","transparent");
so.write("fullscreendemo");
//]]>
</script>