Learn why your images can look different in different windows, and how to fix it!
Sometimes, when working with your site inside the editor, images may be positioned one way, but then once published to your preview or live websites, appear to be in entirely different positions.
This is a common issue in all forms of web development, and comes down to the way websites scale across screens of different resolutions, aspect ratios, and pixel densities.
Often, as a browser window becomes wider, the positioning of an image set to fill the window will change in order to fit the Fill requirement. This is especially common with background images.
To get around this, it's typically considered a web design best practice to avoid using images with clearly defined subjects (such as people or buildings) as background images, in order to ensure that the subject does not become cropped out.
In lieu of these kinds of images, designers typically use solid colors, or images that are composed more abstractly with textures, geometry, or many colors. Landscapes also commonly work well here. If you need images like this, Unsplash is a great resource for royalty-free images, and offers many images that would work great as a background.
If you're looking to showcase a specific image on your site, and want to control the crop rather directly, then your best bet will be to use the image somewhere other than as a background, such as in a Gallery section.
If you would like to add a Gallery section or page, you can do so by following these steps: Add, hide, and delete pages and sections | B12 Help Center
If you need help sourcing images that may work well as a background image for a section of your website, or have follow up questions about any of the above, feel free to reach out to us via hello@b12.io, and we'll be happy to assist you as quickly as we can.