How do I go about designing a background image for a responsive website?

Question

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 key word here.

I have a single page website that I would like to design a background image for in photoshop or illustrator. I would like to be able to design this image around the elements on the webpage. This wouldn't be too hard to design for one specific screen size, but the positioning of elements and the width of the screen can change dramatically from device to device. I only have two ideas of how to go about this, neither of which seems like a good method:

1. Create a background image that ignores elements on the page and doesn't have too much detail on the right/left to get chopped off on mobile devices.
2. Create a separate background image for each device size and use media queries to load the correct image.

Is there a better way to go about this?

Here is an example of what I am talking about:

Answer 1

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.

Answer 2

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.