[Resolved] Backgound-position for mobile header element

[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

[Tom]

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.

[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

[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.

[David]

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.

[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

[David]

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.

[Hendra]

Hi David,

That’s great! Thank you so much. 🙂

Hendra

[David]

You’re welcome

[Author]

Posts