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 :-

HTML Code:

<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

HTML Code:

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

and then wrap the rest of your code in this div

HTML Code:

<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

HTML Code:

<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>

Thread: newbie question: resizing backgrounds

Thread Tools

Search Thread

newbie question: resizing backgrounds

The Following User Says Thank You to forum_amnesiac For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions