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:
- 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.
- 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: