Jump to content

Background sizes?


Dinocanid

Recommended Posts

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...