• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Big background image at the correct size


Senior Member
I'm currently working on a new site which will use a large background image and I wish to know if it is possible to:

A: Detect the resolution of the users screen and display an appropriately scaled image accordingly


B: Scale the image using code at the expense of a big of resolution.



Senior Member
If your image is sufficiently large, some upscaling won't hurt it too much. If you're really set on having crisp background images though then I think there really is only one way: extremely large images.

With media-queries now you could detect screen sizes and serve up a different image to minimize the effects of up or downscaling.


Senior Member
Mrp2049: a handy link, Im starting to think that that may be the best way forward.

Kevin: that is the kind of thing is was looking for but can you give me any insight into the method? Its a tricky thing to phrase on Google.


Senior Member
Well it works by serving different css styles depending on a few rules.

<link rel="stylesheet" href="style.css" media="screen" /> 
<link rel="stylesheet" href='wide.css' media="screen and (min-width: 1280px)" /> 
<link rel="stylesheet" href='narrow.css' media="screen and (max-width: 620px)" />
So in your style.css all your styling would take place, including your background image for "normal" screens.
body {  background: url(images/background.jpg) top left;  background-size: cover; /* this should stretch your background in modern browsers */  (....)}
In the wide.css you would just change the url of your background image to a larger version, perhaps with elements aligned differently. Even if you just sized it up yourself, it's undoubtedly better than the css/html resizing.
body {  background: url(images/muchwider.jpg) top left;}
And vice-versa for narrow.css
body {  background: url(images/naaaarrow.jpg) top left;}