[Resolved] Center background image in sections

[projwest]

Is there way to center the image in a section, such that the center of the image will appear when the site is reduced or shown in mobile versions?

(right now the left side of the image appears)

[Tom]

By default, the section background images are set to cover the entire area.

You can change this for specific sections by giving that section a custom class.

Then, with the custom class, do this:

.generate-sections-container.my-custom-class {
    background-size: auto;
    background-position: center center;
}

That will remove the cover attribute, and set the background image to show up in the very center of the area.

Hope this helps 🙂

[Les Black]

Great tip! I often use the backgrounds and sections add-ons together and your tip makes them work even better.

Now can I push you a little further? Is there a way to write a custom class that shows the background image on mobile centered at a specific position, such as a percent or number of pixels from the left or right edge?

[Tom]

For sure, just use media queries:

@media (max-width: 768px) {
    .generate-sections-container.my-custom-class {
        background-size: auto;
        background-position: 40% 10%;
    }
}

Do a search on the CSS background-position attribute to see all of the available options 🙂

[Les Black]

Got it. Thank you, Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts