Background animated gif file

[Dirk]

I've used an animated gif as my background on one of our pages,
it's 800 x 600. My monitor's resolution is set up for this and it looks great.

However, I changed my resolution to 1024 x 768 and the gif file starts to tile.

So, to correct this, I changed the width of the gif file. But when viewing that size on my 800 x 600 , you can't see the whole image.

Is there a way to fix this so that any resolution gif for a background can
be seen correctly on any resolution monitor?

Any feedback will be greatly appreciated.

Thanks. :)

[k0r54]

Well the most efficient way i say would be to find out the screen size and then load the relevant image. You can do it in both php and javascript depending what one you prefer. As for doing via html or just resizing it would look very pixleated.

Put a post up in either php or javascript and i will let you know there on how to do it.

Good luck!

[Dirk]

TYVM K0r54

[Robert Wellock]

I do hope you are only wanting broadband users with a background image of that size unless it's very basic.

[k0r54]

I do hope you are only wanting broadband users with a background image of that size unless it's very basic.

I do have to agree, it can take a while to load,even if it is basic. I dont recommend it unless it is absolutly neccessary.

Anyway i have given the advice n help so best of luck with your project :)

k0r54

[Dirk]

I see. I will definately see what else I can come up with.
Or if you have any suggestions, they will be welcome.

If you want to have a look at what I'm doing for my company,
here's the link:

http://www.teqtronics.com/key_chains.html


I didn't realize that alot of people do not have broadband.
I was thinking that 56k was a thing of the past. :rolleyes:


Thanks very much!

edit: size of gif background: 214 kb. Is that large for a background ?

[k0r54]

On a corporate network, I porb got a connection here off about 256kb direct to my pc it took 10sec to load.

It tiled on my screen, Ok what i recommend may require a revamp, but it is just what i suggest.

Ok first would be to put a div in the middle of the screen dead centre, with a border it can be about 600 x 400. Then put the background in side there, this will then get rid of the tile problem and you will not require the javascript. It will help the speed, not greatly but it will have a noticable effect on the speed. You can then put your content in there.

I have attached an image that helps describe.

well hope it helps
k0r54

[simplygraphix]

Hi Dirk, Instead of replying directly to your question let me gfive you some options on how to overcome your problem:
1. Load different backgrounds by first detecting the client screen resolution using JavaScript as k0r54 mentioned and you would need to create different images. Employ the screen object's "width" and "height" properties. I don't think you can do this using PHP (I may be wrong). However, remember that not all surfers will have JavaScript turned on. Any case, DO NOT resize the background as it will lead to pixellation. (bad!)
2. You can also place the whole thing in a DIV (or TABLE, if you prefer). You can center these or left align them. Use other CSS background properties to "set up" the background image.
3. Cut the large animated background into two parts. The top would consist of the animated gif (remove dithering in the plain blue sky to decrease image file size). The bottom part will be a JPEG, which as you know, is more suited to the photograph kind of images. So the top has the sky and the keychains as animated gif while the bottom beach is a jpg. (you can really lower the compression level of the jpeg because it would not affect the quality much - experiment it out).

However, if I were you, I would not have used an animated background for a web page to begin with. If the client really insists (you know the types), I would have followed the steps below:
(a). Remove the animated keychains from the background. Saved the background (sky, beach, trees...) as a jpeg and used it as a background for the web page.
(b). I would have then placed the two keychains in two DIVs and aligned them as per requirements. Note: the animated gif keychain image needs to have a transparent background.

On another note, I suggest you work a little on the "halo" affect around "*New* Solar Powered" - Check Anti-aliasing and 'Halo' formation (http://www.webdevelopersnotes.com/graphics/antialiasing_halo_formation.php3) and also Decreasing web images size - GIF optimization (http://www.webdevelopersnotes.com/graphics/decreasing_web_images_size.php3).

There are 3 ways to do things around here; the right way, the wrong way and my way - Robert DeNiro (Casino) [If you haven't seen it, get it now!]

[Mr Initial Man]

Stick this in your head.
<style type="text/css">
body{
background-image:url(yourimage.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>

A quick rundown of the CSS here:

background-image: This is the image you want in the background.

background-repeat: This controls how the image is repeated (tiled) on the screen. Of course, no-repeat makes the image appears one time only. Tiling options are repeat-y (which means it's tiles vertically along one edge), repeat-x (which tiles it horizontally along the top), and repeat, where it tiles over the entire page.

background-attachment: Do you want the image to scroll in the background, or stay put? fixed means that it stays in the same place while your content scrolls, scroll means it scrolls with the page.

background-position: Where do you want it on the page? On the y-axis (top to bottom) You have the choices of top, center, and bottom. On the x-axis, you have the choices of left, center, and right. If you define only one axis (say background-position:top;) or background-position:right;), it will be centered along the other. background-position:center; centers it on both. You can also use percentages, too. For example, background-postition:center; can also be written as background-position:50% 50%, with the x percentage first, and the y percentage second, just like on a graph.


A final note, if you already have a style sheet, simply add the above rules to the rules for your <body> element.

[JAPerson]

Dirk, I consider myself a novice, but your idea would seem to work better as broken up mutiple images in frames. Then all you would have to do is animate the section in the top right corner. This to me would save a whole lot of download time. You could even make the animated part a much smaller transparent gif file that lies on top of your background now compressed as a jpg file.

A table within a table then would help with resolution problems where the main page would be displayed in the inner table and the outer table serve as a border.

Just some simple ideas from a simple minded person that you may consider mixing with some of the ideas already given.

And yes, I am one of those 56k dialup users. We are still here. :) However, I could not judge the download time of your webpage due to a traceroute issue on a server in China. Which seems to me all the more reason you would want to do everything possible to make your page load faster.

[Mr Initial Man]

Just a note: My method won't make the image the size of the screen. It WILL, however, keep it from tiling.

[Dirk]

Ok. Wow!!
So much info. :D

I am working on it. I am getting into CSS.
I guess it's about time, was just procrastinating... :rolleyes:

Thanks very much for all your input.
I'm working on it as I post here....

[Dirk]

Great Quote btw, Simplygraphix........and a great movie!!