Home/ Questions/Q 8465623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:06:14+00:00

For a site, I need to be able to dynamically display background images depending

  • 0

For a site, I need to be able to dynamically display background images depending on the user’s screen resolution.

I.e when the page starts loading, within the <head> a small javascript loads, which sets the page’s background via css to something like http://example.com/backgrounds/beach_800x600 where 800 and 600 is the screen resolution determined via the javascript.

I’m creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there’s not an exact match made, e.g if a user has a screen resolution AxB for which there’s no existing image, then an image will be created & resized to AxB on the fly, and will be served. From then on, anyone with the resolution AxB would be served that image.

The questions I have are:

1) Is this a safe method? I.e I don’t want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?

2) Should I give it an error margin of say 50 or 100 pixels, so if someone’s resolution is 700×900, and I don’t have that but I have 600×800 or I have 800×1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Through the use of CSS3 Media Queries and the background-size property, there’s virtually no need for JS other than for compatibility purposes with out-dated browsers.

    Here’s a link with details about background-size. This property allows you to scale the image in various ways, regardless of the users resolution. Sometimes this might not be ideal.

    And so we have CSS3 Media Queries. With these, you can target certain resolutions (or greater than and less than certain resolutions) and tell the browser which image you would like to show accordingly (or even how to display it, with or without background-size as well).

    • 0