Scaling Large CSS Background Images For Mobile Devices

irahuman

New Member
I'm currently building a XenForo theme that's designed to showcase a full-screen, moderately high-resolution photo background using transparency and fun CSS3 effects. However, I'm fearing a rather nasty scaling problem - especially on small devices. As you might imagine, it pains me to think of a visitor trying to load a photo that's nearly a megabyte on a 3G or GPRS connection.The background in question is a fixed background-image attached to the \[code\]<html>\[/code\] element.What would be a suitable way of dealing with the scale problem? There's only so much compression I would do, so would a JavaScript-based solution to serve a suitably sized image for the viewport/device be effective enough? Are there any other solutions that I could consider?Thanks for your time :)
 
Back
Top