1. Home
  2. Knowledge Base
  3. OptimizePress
  4. Frequently Asked Questions
  5. Why do my background images always look different on different devices?

Why do my background images always look different on different devices?

It’s always good to see if pages look good on several screen sizes and resolution settings, but you’ll certainly want to see what your visitors are actually using by using tracking scripts like Google Analytics or others. My guess is not very many would be using a huge screen or high resolution settings.

The best way to explain how background images work is to think of your screen as a single picture frame. As there are many different size picture frames, just think about how the background image would have to fit in each of those. Obviously a vertical oriented image would have to stretch and get cutoff if it had to fit in a landscape frame. The same goes for a landscape image trying to fit into a vertical frame. Since the images do not rotate it will have to be zoomed in, out, or cropped in order to fill the background of the area you want to use the image in.
On the other hand, images that are NOT background images will always scale to fit the screen they are being viewed on because they do not have to cover the entire background of the section/page that is being viewed.
This would work the same no matter what software you use to create your website. It comes down to the basics of CSS, and this is why we always suggest to pick a background image that does not rely on a specific item in the image to always be in the same spot, because it never will be unless everyone uses the exact same screen and resolution to view the site.
This is also why we added the mobile responsive editors for Tablet and Mobile as you can actually use different background images in each of those.
Generally the way background images work is never the same as how most people think background images work. They almost never look the same from one device to the next or one screen setting to the next. 

If you are having trouble with getting your background image to behave the way you want, we suggest using different background images for Desktop, Tablet, as well as Mobile versions of your pages. You’ll still want to check on multiple devices just to be sure things work better.

If you have any questions about this please reach out to our support and we’ll be happy to offer some suggestions to help make the background images work best for what you want to achieve. 
Updated on November 28, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support