: How do I go about designing a background image for a responsive website? I've been looking around all day for an answer or a guide but I can't seem to find anything. I may be missing a

@Nimeshi706

I think ideally for mobile web sites you want to eliminate or reduce the amount of images being loaded to speed the load time and improve readability.

So, I'd use media queries, but not to load different images for mobile, rather to not load images at all for mobile. I'd stick to simple CSS rendered colors or gradients rather than images for a mobile site.

When i design responsive content I always see it as:


Desktop : All images, full design
Tablet : Some images, simplify design if necessary
Phone : Minimal images, simplify design as much as feasible


For me, mobile browsing is a great deal more conveying the information as opposed to showing all the bells and whistles possible. I want users viewing on their phone to be able to get to information quickly without clutter since most often they are browsing, well, while mobile and not sitting somewhere perusing web sites.

Vote Up Vote Down

@Michele215

Use CSS {background-size: cover} (you can also play with the position)

And yes, you can use some media queries to load a diferent background.

Vote Up Vote Down