Morning all,,

I am building a website with a fixed background image, and im just wondering what the best dimensions would be to design the image in to work with all monitor res.

 

Thanks in advance.

YOu can put your background in cover like this :

 

html {

 

background: url('your image') no-reapeat center center fixed;

 

-webkit-background-size: cover ;

 

-moz-background-size: cover ;

 

-o-background-size: cover;

 

background-size: cover;

 

}

 

Works in:

• Safari 3+
  
• Chrome Whatever+
  
• IE 9+
  
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
  

yeah i know how to do that,

im just wondering what size to actually design the background in, as it displays differently on each monitor res

 

Cheers

Usually when people use cover value for background-size, they use an image of size 1920 x 1080 which the resolution of typical large screens (excluding retina displays: 2650 x 1600).

 

But this makes the image size large, so in order to reduce the size you could optimize the image in fireworks by smoothing the image after reducing its quality a little. This way the images will remain sharp when down sampled and displayed on the usual small screens but stills retains enough quality on HD screens.

Sanygeek's given the ideal answer which would apply in 90% of cases, but if you can't compromise on image quality (e.g. photography website) even for users viewing at high resolutions, (or conversely want to really streamline for people viewing on mobiles) you can use media queries to establish the users screen resolution and send different background images for different screen sizes depending on the user. That way you could have several versions of the same image across various resolutions.

 

See:

http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html