Hello,
I’m about to start a site which needs a background image to fill the whole screen, and I was just wondering about how to implement it.
What size image should I use (keeping download times in mind)?
Should I set the width to 100% in CSS, or would it be best to set the width/height using JavaScript.
Cheers,
Jon
I answered a similar question to this just yesterday: http://www.sitepoint.com/forums/showthread.php?t=690706
See if that helps you out at all.
Ant
Ant’s suggestions are good ones. I wouldn’t recommend using JS to set width/height on anything, and certainly not something as central to your design as your single large BG image.
I was thinking that I could do it in CSS by default but try to make it look better using JavaScript, if it’s enabled. If I use JavaScript to firstly change the CSS so there is no background image and then create the image element but hide it until it’s fully loaded (because it will be a rather large file), as soon as it’s ready I can fade it in.
How does that sound?
What size (width) image should I be going for?
Cheers,
Jon
The simple way to accomplish it would be to have the background image in an IMG element within the document, use absolute positioning to make it 0 at the top, left and 100% wide and tall, then use z-index on the content of the site to position it above the image. When you scale the browser window it’ll scale because the height and width on a normal image is taken into account… and it’ll appear in the background due to the z-index placing all the content above it. It’s not the most semantic solution but it’s clean, will validate and will give you the precise look you require with absolutely no scripting (it’s the best solution that exists to-date).
Here’s an example of it in action: http://www.ringvemedia.com/
jonpugh114
hi check these two example if u want to use background like these two sites i will snd u css .
http://whatstheweather.net/weather/submit