You could use a color background for the section, then use a separate section above or below that with just your image in it. However, if you want the image to be fully viewable on all devices, consider using it separately on the page as an image within a section rather than a background. With the Weebly editor, you can use spacer elements as an alternative to more text. And if you don’t want to add more text? You can also use line breaks instead of text (if you visit the example site I linked, you will see I did this on the page called “Home 2”). This will help control which part is kept within the screen as the edges are cropped. If you have the Square Online editor, you can set a focal point for the image. This will mean that more of the image is shown on wider screens, so the only significant difference between large and small screens is how much the sides are cropped. Regardless of how the image is cropped, it still looks good as a background.īut what if you really want a specific image? The simplest solution is to add more content to your section if possible. For this solution, I swapped in a different image where there isn’t much focus on any individual part. So, what can you do to change how your image looks on any size screen? The easiest solution is to simply choose one where it doesn’t matter how much is cropped or shown. If this didn’t happen, the background image would become squished horizontally. Because of this, you’ll see more of the background image vertically, and the sides of the image will be cropped. Your section now needs to be much taller to accommodate your text. Why does this happen? Well, imagine reducing the width of the desktop window until your text starts to wrap and become taller. What happens on mobile devices, though? Well, you can see from these screenshots that it’s the reverse: On desktop screens, the focus is less on the guitar player as a whole and more on the guitar and the player’s hands. I’ve added a background image to the homepage section that deliberately doesn’t follow the advice above. Here’s an example website where the background image is cropped differently on different screen sizes. Good for all screen sizes because it will look great no matter how you crop it.
Good for desktop, but not for mobile because the flower may be cropped out. You’ll have the best results if you consider how an image will look cropped when choosing it, rather than being surprised by this later. Even if part of the image is cropped, you will still see flowers in the background image. For example, what if you have a website where you sell flower seeds? A good image has many flowers in it rather than a single flower.
You’ll want something that fits your visual aesthetic but isn’t necessarily the focus of it. The best background images fit your brand and style, do not inhibit legibility, and look good no matter how much or little they are cropped. How do you make sure that they look good across different screen sizes?įirst, let’s talk about what makes a good background image. The increasing use of mobile devices like tablets and smartphones presents a unique challenge with background images, though. They’re a great way to add visual interest to a page while still letting you add additional content on top of them. With both the Square Online editor and Weebly website editor, you can use images as section backgrounds.