• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Another website resize question

M

MytMowse

Guest
#1
I looked around this board and saw something for resizing webpages.

Now I have a real neat bg image I made and want to use. Only most people do use 1024x and I use 1280x.

So I was wondering if there is a way I can make the background for a certain screen size to shrink? :eek:

Thanks. :)
 
#2
Well, one way to do that would be to create several versions of the same image scaled to fit certain resolutions. Just name them something somewhat descriptive like "pic800x600.jpg", "pic1024x768.jpg", etc...

Then, just a little javascript in the HEAD section of the page should do the trick:

<script language="javascript">
var sw=screen.width;
var t='<style type="text/css"> body { background-image:url(';
if(sw==1024)t+='"pic1024x768.jpg"';
else if(sw==1152)t+='"pic1152x864.jpg"';
else t+='"pic800x600.jpg"';
t+='); background-repeat:no-repeat; background-position:center } </style>';
document.write(t);
</script>

Basically the script writes out the style sheet rule for the background image. It is set up for 3 resolutions; 800x600 (default), 1024x768, and 1152x864. It also sets it so the image is centered and will not tile to fill the screen. You could take that out, but it looks best if the image is big.

Another way to go about it would be to use just an image sized to 800x600 and make the background color of the page the same as most of the image's main color. Then, make the image centered and non-repeating. The image will always be the same size, but the background color will help it blend in.

There may be better or simpler solutions, but thats what i just came up with :)
 

Members online

No members online now.

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,014
Latest member
chawalsub