[Resolved] Header background not centered horizontally

[Antonio]

Hi
using the header with image as background (http://www.poesiapresente.it/) I get a problem on small display like smartphone. The image is not centered horizontally. How can I fix it?

[Tom]

Hi there,

Background images can be tricky on mobile.

Can you give this CSS a try?:

.home .generate-content-header {
    background-position: center center;
}

Let me know 🙂

[Antonio]

Yes it works. Thanks.

[Tom]

You’re welcome 🙂

[Joanne Smith]

try for mobile phones – add custom css plugin and then copy the following

.site-header{
background-position: center center;
background-size: 100%;
background-repeat:no-repeat;
background-position: center;
}

If you update your custom area — it will over ride the above — make sure to save this LAST to remain active

[Tom]

Thanks for posting that solution as well 🙂 That will work for the site header for sure.

[Author]

Posts