Hi all, been developing a welcome page for teignmouth community school, i found a site i realy like that uses a background image. normally i steer away from this and use a css grad, but on this occasion I would like to know if it was possible, or even easy to set a background image, that displays at 100% on all resolutions?? the raw image I am planning on using would be from my DSLR (3888px X 2592px)

 

Please help!

They do look very cool those sites with oversized and resizable picture backgrounds.

 

Well you can set background-size:100% and that will do the trick. But this CSS3 so you will need to set a back up for your background. Having worked on a fair few school websites, one thing you should bare in mind though is a lot of schools are kind of slow on the uptake of new browsers (IE6 still crops up here and there!) so using CSS3 as a central part of your home page may not be the best approach.

this will do it http://buildinternet.com/project/supersized/

Other non-javascript methods: http://css-tricks.com/perfect-full-page-background-image/

 

Just be aware of filesize/image quality. Low filesize will obviously load better, but on bigger screens the image will lose quality, and vice versa,

cheers all, i went for the css route, using a large image, found a tutorila thorugh this site http://www.alistapart.com/articles/supersize-that-background-please/

 

here's the result at the moment, gonna change the crappy buttons though

http://www.teignmouth.devon.sch.uk/tcs_welcome2/