Background sizes?

[Dinocanid]

I've been having trouble finding what size fits best for a website background, where it doesn't look blurry or oddly stretched. (I have the css set to "cover" btw, but I've also tried 100%)

My sites are set up so all of the content is in the center, with space on both sides to view the background.

 

[Angel]

There can't be one image and one css rule for all cases. Use separate properly resized and resampled images made for most common resolution breakpoints, and set them to cover so they are also good for everything in between. Don't forget about portrait orientation and 2x (and if possible 3x as well) for retina.

 

[Dinocanid]

There can't be one image and one css rule for all cases. Use separate properly resized and resampled images made for most common resolution breakpoint, and set them to cover so they are also good for everything in between. Don't forget about portrait orientation and 2x (and if possible 3x as well) for retina.

I'll try that. I'll have to try portrait orientation too, since so far I've been using large "box" images.

 

[Design1online]

There are tools on google chrome which will let you quickly convert your site to different device displays. This is a good way to test it in different screen sizes.

View attachment 1668 

View attachment 1669

You can also use the network tab to then see how long it will take the image to load under different network conditions. IE you don't want a phone using 3G to have to load a 2MB background image.

View attachment 1670

View attachment 1671