Jump to content

Recommended Posts

Dinocanid    33

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.

Edited by Dinocanid

Share this post


Link to post
Share on other sites
Unknown
LV 2
Angel    4

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.

Edited by Angel
  • Thanks 1

Share this post


Link to post
Share on other sites
Dinocanid    33
2 hours ago, Angel said:

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.

Share this post


Link to post
Share on other sites

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.

5a4fb0539f9ea_ScreenShot2018-01-05at12_04_51PM.png.733c064401369d149c92d0247533f2bb.png 

5a4fb05a3dede_ScreenShot2018-01-05at12_05_00PM.png.b861e8ee068f5e5af86e693e22c73b88.png

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.

5a4fb0a74856e_ScreenShot2018-01-05at12_05_47PM.thumb.png.66d14e268f5f59e58bdd36fe11845026.png

5a4fb0ac21af1_ScreenShot2018-01-05at12_05_54PM.png.274d3679ade98f398585d43f15b29aec.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now




×

Important Information

By using this site, you agree to our Guidelines, Terms of Use, and Privacy Policy.