what width should my background image be?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have made a background image but it doesn't fit correctly on my website and only goes three quarters of the way across the screen.

I have made it 1080 wide.

What is the size it needs to be to fit the screen?

Photo of Create My Website

Create My Website

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop


  • 7473 Posts
  • 2115 Reply Likes
Try 1900 Stephen
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Stephen,

You can use any size for a background image but if your image is too narrow you may get a tiling effect. The height of the image is less of an issue as your page will expand based on how much content you add to it.

Depending on your visitor's monitor size, the picture background may or may not look the same as on your monitor. As a general rule of thumb for web development, one should not bank on specific dimensions.

We suggest uploading a picture that is approximately 1500-1700 pixels in width to avoid tiling for most monitor sizes. An image of this size usually means that your file will be quite large which may cause your page to load up slowly. It is recommended that you compress your image to help resolve this issue. Here's an image compressor that you can use: Online Image Optimizer.
Photo of Gop


  • 7473 Posts
  • 2115 Reply Likes
Hello Stephen,

If you have Yola Silver and you know how to get to and modify your CSS there is a way to do this:

Upload your image to your File Manager and then change the CSS affecting your background image:

background-image: url(resources/{your-background-image}.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Then add the browser prefixed CSS:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Then add the CSS property:

background-size: cover;

make your image originally larger than a screen because if you subsequently enlarge an image you will lose resolution but if you reduce an image it won't :)

Reference: http://webdesign.about.com/od/css3tut...
Photo of Tobiasimage


  • 2 Posts
  • 0 Reply Likes
See this image processing application, inlcuding the image backgroud settings,
Photo of cathyhill


  • 2 Posts
  • 0 Reply Likes
there is a fixed size for image background of website?I once took it for granted that I can easily change the image size as I wish. Hope this article can help others a little.