Blog

Why Background Image Varies in Difference Devices

Why Background Image Varies in Difference Devices

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

11 Comments

  1. Morten Simonsen
    Feb 18, 2016 @ 14:59

    Thank you for this awesome feature :-)

    uproar.dk (Built with Themify)

    Reply

  2. Usha
    Feb 18, 2016 @ 18:01

    That’s another great feature! :)

    Reply

  3. Adauto Silva
    Feb 22, 2016 @ 12:13

    This type of adjustment could also work with the background of selected images to pages. As I mentioned in a call mine: https://themify.me/forum/topic/background-2

    The images have different performances in each device, not like this article …

    Link to the website where this occurs “error”: http://www.comsamambaia.com.br/

    Reply

  4. ranjith
    Apr 02, 2016 @ 10:45

    nice tweak to resolve background image positioning..thanks for another useful feature

    Reply

  5. Janmejai
    Apr 03, 2016 @ 06:11

    That’s a really nice feature, most of the themes miss this one, which makes the background irrelevant.

    Reply

  6. banks dada
    Apr 09, 2016 @ 06:37

    what is the picture is not at the right bottom? Just want to know how flexible this is. if its what am thinking then themify has won me over for good.
    Thanks

    Reply

    • Kurt @ Themify
      Apr 10, 2016 @ 23:11

      Hi Banks,

      You can set it to showcase as right bottom, if you’d like. If you need more detail/clarification for this, please send us an email with more detail at info[at]themify.me and we’ll provide you more accurate support.

      Reply

  7. Juan Antonio
    May 11, 2016 @ 21:26

    Dear,

    I do not have this option, where can I update.

    Regards

    Reply

    • Kurt @ Themify
      May 12, 2016 @ 01:18

      You can update on your WP Admin on the Themify panel. If you cannot find it please send us an email at info[at]themify.me with your username so we can check your account details.

      Reply

Leave a Reply to Kurt @ Themify Cancel