How to prevent article background showing up on top of t4-masthead background?

neobra-gmail-com

Ja_stark default template puts article intro image on ja-masthead.
This background image is shown on top of the other background image set in masthead>overlay .
It happens when you open an article via module "Articles - Category" (section 4 / section 6).
The size of the background on background image does not fit and does not look nice.
Question: Is it the Joomla module which sets the article intro image to the masthead background?
Is it possible to prevent this?
Maybe easiest is not to show the article intro image on the masthead background.
How could I eg. set the Z-index to 0, so that he original masthead background is
shown on top of the article masthead background?

Ninja

neobra-gmail-com
Hi
Add this code in custom css to remove the overlay on the images

.ja-masthead:before {display:none;}

The article does not load the intro image in masthead. Its done by the JA Masthead Module on menu specific,
You can open this module and change the image.

neobra-gmail-com

Adding the given code with tools > edit custom css, has no effect.

I also tried:
.t4-masthead:before {
padding-left: 0px;
padding-right: 0px;
}

and

.t4-masthead .ja-masthead:before {
color: #fff;
position: relative;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}

Seems the custom code does not overwrite the templates css.

Ninja

neobra-gmail-com hi
Kindly turn off the css compression and share the Url of page on which I can check it.

neobra-gmail-com

http://w3.finnstamm.fi/
page to check:
http://finnstamm.fi:8080/jas_finnstamm/index.php/fi/tuotteet/esimerkkejae/11-sydaenpuu

site is under developement, only landingpage working well and only finnish language has articles.

Ninja

neobra-gmail-com
Hi
Replace the code with

.ja-masthead:before {
     display:none!important;
}

This will remove the overlay and show original image.

neobra-gmail-com

After some trials I got your suggestion working. I had to change it to:
#t4-masthead .bg-overlay {
display:none!important;
}

Unfortunately it does remove the background which I would like to show. The image background image I want not displayed is the finnstam_sydänpuu_stamm.jpg which seems to be a style for the ja-masthead class. I can not figure out how to set this background-image to none only for these pages with help of custom css.

Ninja

neobra-gmail-com
Hi
I am not getting which part you want to remove. As each masthead image you see is handled by the module. You can change it for a menu from JA masthead module on your site. Kindly take screenshot of part you want to hide not html code.

neobra-gmail-com

Hope this screenshot shows better what I want.

Ninja

neobra-gmail-com
Hi
Open JA Start template style options > Layout > edit layout > Masthead > edit settings > overlay : http://prntscr.com/1287fny
Remove the overlay image and save it.

Regards

neobra-gmail-com

Thanks for your reply, but it removes the image I want to keep.

The image I want to remove comes from the article intro image.
I can not remove the intro image from the article, because then
also no image is shown in position: section 4 on the ja_stark_home
template.

Ninja

neobra-gmail-com
Hi
This is the same image you mentioned to remove in the last post.

Use this code in custom css

.view-article .t4-masthead .ja-masthead {
    background: transparent!important;
}

it will hide the image for articles view.

neobra-gmail-com

Thank you!
This did do the job.
Just what I needed!

Ninja

neobra-gmail-com
Glad to hear it worked for you.

Regards