[Resolved] Backgound-position for mobile header element

Home Forums Support Backgound-position for mobile header element

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1321128
    Hendra

    Dear Support,

    I have had problem understanding the background-position setting for mobile and tablet’s header element. Been trying for the past few hours, including many trials and errors and reading some online tutorials. So, am looking for help here. 🙂

    There are three URLs I included. On desktop, they all look fine. But not on mobile and tablet.

    For the outdoor URL: the background image needs to be shifted to the left. Just a bit, as long as both the mom and daughter can be fully visible on both mobile and tablet.

    For the on-location URL: same as the above, need to be shifted to the left a little bit for both mobile and tablet.

    For the at-home URL: the background image needs to be shifted to the right to show both the little boy and the mom on both mobile and tablet.

    Thank you so much for your help.
    Hendra

    #1321344
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Are these all the same Header Element, or are there 3 separate ones?

    If they’re all the same, you’ll need to use some CSS with the page IDs to target them individually.

    For example, the first link, you could do this:

    @media (max-width: 768px) {
        .page-id-1176 .page-hero {
            background-position: right center;
        }
    }

    That will display the image starting at the very right, and it will center it vertically.

    #1321384
    Hendra

    Hi Tom,

    Thanks for the reply. They are three separate Header Elements.

    I actually tried that CSS you wrote above before asking for help. It shifted the image too much to the left. I just need it to move a little bit by a small percentage. My lack of understanding of how the background-position works led me to trial and error but still without success.

    Hendra

    #1321390
    Hendra

    Hi Tom,

    By the way, David helped me before with another Header Element (for the Home). He gave me this CSS for that one. And it worked for that Home page on mobile. It shifted the image how I wanted it.


    @media
    (max-width: 768px) {
    .page-hero.mobile-background-35 {
    background-position: 35% top;
    }
    }

    But when I tried to create another one following the above and played with the percentage and top/left/right value, I could not get it to work for the other three links I sent.

    #1321723
    David
    Staff
    Customer Support

    Hi there,

    try this CSS for the Outdoor:

    @media (max-width: 768px) {
        .page-id-1176 .page-hero {
            background-position: 70% center;
        }
    }

    Special Location:

    @media (max-width: 768px) {
        .page-id-1237 .page-hero {
            background-position: 60% center;
        }
    }

    And at Home:

    @media (max-width: 768px) {
        .page-id-1221 .page-hero {
            background-position: 65% center;
        }
    }

    for the horizontal position consider 0% is far left, 50% is center and 100%. Hope this and the above helps.

    #1322017
    Hendra

    Hi David,

    Thank you! I have added them and all is good now.

    By the way, can the CSS above be changed to:


    @media
    (max-width: 768px) {
    .page-hero.mobile-background-65 {
    background-position: 65% center;
    }
    }

    and then I enter the mobile-background-65 into the Element Classes field in the Header Element for that particular page?

    I did try and it worked.
    I obviously need to learn more about the values for the background-position to move image.

    Thank you again David.

    Hendra

    #1322051
    David
    Staff
    Customer Support

    Yes, you can do that 🙂

    You can also combine your CSS rules inside a single media query eg this.

    @media (max-width: 768px) {
        .page-id-1176 .page-hero {
            background-position: 70% center;
        }
        .page-id-1237 .page-hero {
            background-position: 60% center;
        }
        .page-id-1221 .page-hero {
            background-position: 65% center;
        }
    }

    does the same as the above CSS.

    #1322287
    Hendra

    Hi David,

    That’s great! Thank you so much. 🙂

    Hendra

    #1322315
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.