| SubscribeFavorite

• Author
  Posts
• • DECEMBER 28, 2021 AT 9:03 AM#7178REPLY

    Wayne

    Participant

    I have a hero image that is a collage of smaller images and applied it as a secondary background.

    I have created it as a 1920 width image and inserted it as a Secondary Background. On small devices it loads from the left so I am getting a full image followed by a piece of the next one in the collage. Is there a way I can get the bachground image to center so the middle image in the collage is in the centre on all secreen widths?
    Thanks, Wayne

  • DECEMBER 29, 2021 AT 9:18 PM#7180REPLY

    Chris F

    Keymaster

    The simplest way to centre the background image across all devices is to use the “primary” background function, where this happens automatically.

  • DECEMBER 30, 2021 AT 5:08 AM#7181REPLY

    Wayne

    Participant

    OK. Thanks Chris. I thought I had to use the secondary image to get full width with the container for the text. I will make the change.

  • DECEMBER 30, 2021 AT 11:11 PM#7182REPLY

    Wayne

    Participant

    Looks like the container for the text is full width as well so I guess I will have to use some CSS for the text.

    • JANUARY 1, 2022 AT 10:36 PM#7202REPLY

      Chris F

      Keymaster

      To create a “centre” section in a full-width row Wayne, you can add a Custom HTML module to the row and use something like:

      <div style="max-width: 1240px; margin: 0 auto;">CONTENT</div>

      Hope that helps. ;o)