How do I stretch a single image to be 'Background'

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I cannot get a photo to stretch across the Background ... it insists on tiling!
Is the feature 'broken' or am I doing it wrong?
It used to work with this photo - until I inadvertently reduced the size of the image (but only by 50%) ... however, I'm not sure that should affect the instruction to 'Use as Background' in any case .. ?
Photo of NetWorth

NetWorth

  • 7 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Thanks for trying out the new style. The feature is not broken. In the Style Designer, click on "Background Image" and make sure the size is set to "cover". Also note that if you use this option use a "fixed" attachment for the best result.

Please let us know if you have any difficulty with this.
Photo of NetWorth

NetWorth

  • 7 Posts
  • 0 Reply Likes
Hi - thanks for your quick reply.

I was not aware I was trying out a 'new style'? ... I originally created the website back in May.

I have looked at Style Designer as you suggest, but there is no option to "set the size to cover' ... please advise?

Also, initiating the Style Designer appears to have thrown out various other aspects of my site design, including fomatting such as line spacing and font size.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
My apologies - I misunderstood your initial question. I saw a new site in your account using the new default style and mistakenly assumed this was the one you were working on. Can you let me know which site you are having the problem with your background on so I can investigate further?

If you have an existing site with a lot of inline formatting and/or custom code then enabling the Style Designer would potentially cause problems. This is why we have given users with existing sites created prior to the release of the Style Designer the choice to enable or disable it. To correct the problem you describe you could either disable the Style Designer and continue editing your site as you did before, or strip out any inline formatting in your text widgets by using the "remove formatting" button and then set your preferences in the Style Designer for line spacing, font size etc. Although the latter option is more work, I strongly recommend it, as it will ensure a far more stable and reliable editing experience in the long run.

Get back to me with the site you are struggling with and I will take a closer look. It could be related to the style used on the specific site not supporting the newer features, but I would have to check to confirm this.
Photo of NetWorth

NetWorth

  • 7 Posts
  • 0 Reply Likes
Hello again,

The site is: http://rsmotors.yolasite.com/

If I use the 'remove all formatting' button that will effectively take me back to square one as it will lose all my design work.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Removing the formatting will undo all inline formatting and may seem like an insurmountable task but it does then allow you to create the exact look and feel you want site wide using the style designer.

I see that you still have tiling on your published page but that you did select no tile for your background image in the Sitebuilder. However because the image is too small it's likely still not the look you want.

Although you can use any size for a background image, if your image is too narrow it will cause tiling effect you want to avoid. The height of the image is less of an issue as your page will expand based on how much content you add to it. Another thing to keep in mind is 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. That said, you can try 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, so you'll want to compress the image to prevent your page from loading up slowly.