Hi

I need to be able to style individual Masthead modules in order to be able to show the image in the Aiga-template.

Have tried to apply different things to the custom.css file, but without luck.

As mentioned: Just need to be able to make the background image show in selected Masthead modules - not all.

A quick answer would be much appreciated. Thanks a lot in advance.

Best
/ Kristian

    Hi wismondodk

    You can use the custom.css and add the menu item id of the page where you want to apply custom background to masthead

    .itemid-118 .t3-masthead .ja-masthead {
  background-color:#c00!important;
}

    This code add a red background to the masthead in contact-us page which in quickstart installation has id = 118

    Hope it helps

      Hi Pavit

      Thank you for getting back with a solution. Much appreciated.
      I though intend to set an image as background - not a color. Able to help me out?

      Thanks

        Hi Pavit.

        Thank you for the link.

        To be clear - I need the individual Masthead module to behave exactly as seen on the JA Space template. Most importantly: The image must resize and keep ratio when screen-size is changing.

        Thank you for taking the time to help out.

        In simple terms the challenge is that the JA Aiga simply disallow showing the background set in the module. The image never shows. Instead a white background is seen.

        Would be perfect if the Masthead module showed a white background if no image was set as background in the module + the image would show if set.

        That would intirely fix the issue 🙂

        Thanks

          Hi wismondodk

          I tested the background image added via custom.css on my local installation and it worked fine.

          Please add your website url and a super user account to access it so we can identify the reason why it doesn't works on your website.

            Hi Pavit.

            Sorry. Can't do as I can't share the site at the moment.

            The image is added when this is added to custom.css:

            .itemid-NUMBER .t3-masthead .ja-masthead {
            background: url("IMAGE") no-repeat center center fixed !important;
            padding-bottom: 144px;
            padding-top: 144px;
            margin-top: -144px;
            margin-bottom: -140px;
            background-size: cover;
            position: relative;
            }

            Can you spot any mistakes? Thanks.

              wismondodk

              I do not see any mistake, you can also add settings for your mobile device adding to custom.css

              @media (max-width: 767px) {
.itemid-NUMBER .t3-masthead .ja-masthead {
your code :
}
}
                Write a Reply...
                You need to Login to view replies.