Center background images

 | SubscribeFavorite

Viewing 3 reply threads
  • Author
    Posts
    • #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

    • #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.

    • #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.

    • #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.

      • #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)