My images look different after publishing

Sometimes, when working with your site in the editor, images may be positioned one way, but once published to your preview or live websites, they appear in entirely different positions.

This is a common issue across all forms of web development and comes down to how websites scale across screens with different resolutions, aspect ratios, and pixel densities.

Often, as a browser window widens, the positioning of an image set to fill the window changes to meet 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, to ensure the subject doesn't get 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, Pexels is a great resource for royalty-free images and offers many that would work well as backgrounds.

If you're looking to showcase a specific image on your site and want to control the crop directly, your best bet is to use it elsewhere than as a background.