Modify the masthead background image position

toddjharrison73

Hello,

I would like to modify the position of the masthead background.

The masthead background is pulled from the article intro image, and while this is very cool, it makes for some very strange masthead images. 🙂

I would like to modify the position of the masthead background image to be 140px higher, so the image is effectively moved up.

Currently, because the image is of a face, you only really see the forehead of the person.

Could you please provide the CSS code to reposition the masthead background image so it looks more like:

I think about 140px should do it, but if I have the CSS, I can always play with the number.

Thank you so much. Please let me know if you have any questions.

aman204

toddjharrison73 To be precise, Kindly provide direct site link from where the screenshot has been taken in order to take closer look

toddjharrison73

D'oh!!

Sorry about that. I can't believe I forgot the link. 🙂

https://trekcommander.space/lcars/22-officers-and-crew/83-arix

pavit

Hi toddjharrison73

You can play with padding values adding it to custom.css file

.t3-masthead .ja-masthead {
padding:140px 16px!important;
}

Regards

toddjharrison73

Thank you Pavit, but that has just made the masthead HUGE. 🙂

I was looking maybe for a negative top margin on the background image itself to bump the image up inside the existing masthead window, instead of making the actual window bigger.

Does that makes sense?

toddjharrison73

I'm trying to find a solution that works for both the article page and the category page. If I crop the article intro to the correct porportions so it looks good on the article page, the category page doesn't look so nice... the images are very skinny and the faces hard to see.

https://trekcommander.space/lcars/crew-roster

But if I crop for the category page, all we see on the article page are foreheads! hahaha

If we can figure out some CSS to give the background image on the article page masthead a negative top margin, I think that could work. Between that and some clever cropping, I think we could find a solution that makes both pages look OK.

aman204

toddjharrison73 If we can figure out some CSS to give the background image on the article page masthead a negative top margin, I think that could work.

If you are looking forward to specific CSS which could append solely for the respective page, Try add this to custom.css file and adjust value accordingly :

.itemid-151 .t3-masthead .ja-masthead #ja-masthead-bg{background-position: 0 10% !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

toddjharrison73

Woo hoo!!!!

Aman, that is PERFECT!! Thank you so much.

🙂 🙂 🙂