Anyway to scale background images to users resolution?

Associate
Joined
5 May 2007
Posts
1,470
Hi all

Is there anyway with HTML or CSS that I can scale a background image to the user's resolution?

If the image is too big then it looks awful as does it when the image is too small.

Thanks
 
You could technically do it with PHP/Javascript and GD, but it wouldnt really be worth it - you need to consider the background more in your design to design around it.
 
Sorry to jump in, but Thats excellent! ... how exactly is that done?

i dont understand 'layers and overlay them on divs':o

They've set the top right clouds as the background of the page body, and the top left as the background of the h1 title "The Rissington Podcast". The body always covers the whole page, so the top right clouds stay put, and the h1 tag is "ancored" in the top left, so that always stays put. Very neat and looks good :)

akakjs
 
As stated really no way to do it. Just get a background you can repeat in the x or y direction.
 
i have done this before but it was just to test and i cant find the code now... basically i used javascript to return the screen dimensions, then created an absolute positioned div (0,0) at the back of the z-stack and placed the image (not background, an actual image) with the screen dimension hard coded in (just used standard html width and height although its not ideal) and it worked...

so yes, with a bit of jiggery pokery it can indeed be done ;)
 
My mate also did similar...

His way however, opened up different webpages according to the rez

Basically, the ode was as simple as

IF REZ=800x600 then load "800600.htm"
IF REZ=1024x768 then load "1024768.htm"

Ok, it was a bit more than that, but it really was ridiculous and it worked too!

I myself have always found it absolutely stupid that I come across a website, and its clearly been designed for 800x600 and so with screens these days being 1024x768 at the very minimum, there is always a huge gap on the bottom and right of the page... Its bloody stupid as hell.

Im not very good at webdesign, but at least when I write a web page, I try to get it to look the same no matter what rez and no matter what broswer and even no matter what computer either.

Here are a couple of examples :-

http://northwales-cases.co.uk/
http://fatrakoon.co.uk/
http://www.custom-pc.org.uk/
http://www.the-yc.org.uk/

Nothing special but these web pages should look the same on anyones browser no matter what... Within reason of course! - if you are running a 320x200 screen in Mono then Im sorry, but thats just too much.
 
Back
Top Bottom