Change background image on ja mastehad

loujonesdesign

Hi, I am trying to change the background on the ja masthead, using the following custom.css override, but the image does not appear.

.t3-masthead .ja-masthead:after {
background-image: url('../images/myfeock/homepage/bg-decor2.png')!important;
background-size: contain;
background-repeat: repeat;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}

Many thanks

Ninja

loujonesdesign
Hi
For image open JA Masthead Module
You can add different images and title for different menu items.
For example i added one image on the news page via Module.

loujonesdesign

Brilliant, thank you, this does seem to be working on some pages, for example what's on/events calendar, but not on others, directory/groups and facilities. I think I have added them correctly to the module, any ideas? Thank you

Ninja

loujonesdesign
Hi
Kindly check again the menu selected show fine.
Can u share the page URL on which it not working?

loujonesdesign

HI, just to confirm, the masthead has changed on this page:

https://loujonesdesign.com/dev-feock/index.php/whats-on/events-calendar

But not this page (even though I have changed it on the JA masthead module):

https://loujonesdesign.com/dev-feock/index.php/directory/social-recreational-and-amenities

Ninja

loujonesdesign
Let me check with Dev team on this
Masthead is not work for single article view it picks article title and default image.

saguaros

Hi loujonesdesign

On article detailed page, template overrides the masthead section and shows article's title there. Normally, we will retrieve image of article to show there also but with concept of this template, it will not look nice so it will display title only.

You can add this custom CSS to set background image for it:

.view-article.itemid-292 .t3-masthead .ja-masthead:after {
	background-image: url('../images/myfeock/homepage/bg-decor2.png');
}

and change to your desired image.

loujonesdesign

Hi, thanks, I have added your code to custom.css and changes the image reference:

.view-article.itemid-292 .t3-masthead .ja-masthead:after {
background-image: url('../images/myfeock/homepage/article-header-2.jpg');
}

The default image has now disappeared but the new image still isn't showing:

https://loujonesdesign.com/dev-feock/index.php/directory/social-recreational-and-amenities

Any ideas, many thanks

saguaros

loujonesdesign The image path was incorrect, I updated for you. Kindly check.

loujonesdesign

That's perfect, thank you