Background image must show in individual modules - AIGA Template

wismondodk

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

pavit

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

wismondodk

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

pavit

wismondodk

you can use the background-image:url(path to your image)

https://www.w3schools.com/cssref/pr_background-image.asp

wismondodk

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.

wismondodk

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

pavit

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.

wismondodk

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.

pavit

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