[Resolved] Center background image in sections

Home Forums Support Center background image in sections

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #110979
    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)

    #111009
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #137959
    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?

    #138038
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #138061
    Les Black

    Got it. Thank you, Tom.

    #138138
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.