Center background image in sections

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 :)

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?

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 :)

Got it. Thank you, Tom.

You're welcome :)