With Google now favouring mobile friendly sites, creating responsive sites have never been more important. But making sure that your site looks good on all devices can be tricky, especially with background images. For this tutorial, we're going to explain how background images varies in different devices, and how the Builder background position option can help fix this issue.

The image below illustrates how background image displays on different devices/resolution. By default, the parallax and fullcover background image is displayed in the center. So you can see that the image is fine because the subject (which is the girl model in this example) is in the center of the image.

a good example of how images varies in different devices

However, if the image subject is on the side like the example below. You will see how the face of the model is being covered on certain resolution because the image is positioned in the center.

a bad example of how images varies in different devices

To resolve this problem, we recently added the “Background Position” option in the Builder row background options.

how the Builder Background Position can help fix this issue

By selecting the background position (for this example, we will select "right bottom"), you can keep the image subject in the visible area.

a fixed example of how images varies in different devices