• 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


wac

Senior Member
#1
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

or

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


Thanks
 

Kevin

Senior Member
#3
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.
 

wac

Senior Member
#4
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.
 

Kevin

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

HTML:
<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.
Code:
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.
Code:
body {  background: url(images/muchwider.jpg) top left;}
And vice-versa for narrow.css
Code:
body {  background: url(images/naaaarrow.jpg) top left;}