Is it possible to have my HEADER image responsive ?
I have articles with header images like this : http://www.generikvapeur.com/la-deuche-joyeuse/ where header image are full on computers, but reframed on the phone. How can I do to have the full image adapted to the phone ?
The Page Header uses the Css Background Cover property which selects the best available cropping for the images .
You can try adjusting it using this custom css though blank space will occur.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi Support,
Is it possible to have my HEADER image responsive ?
I have articles with header images like this : http://www.generikvapeur.com/la-deuche-joyeuse/ where header image are full on computers, but reframed on the phone. How can I do to have the full image adapted to the phone ?
I only have this problem on articles and not on pages like that http://www.generikvapeur.com/la-compagnie/qui-sommes-nous/
Hope you will be able to help me !
Many thanks
Hey Again,
The Page Header uses the Css Background Cover property which selects the best available cropping for the images .
You can try adjusting it using this custom css though blank space will occur.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#page-header-bg[data-bg-pos="center"] .page-header-bg-image { background-size: contain !important; }Thanks
ThemeNectar Support Team
Hi Tahir,
It doesn't work.
How can I do to have ARTICLES Header Images be adapted to phone (and not cropped like that)
www.generikvapeur/la-deuche-joyeuse
Its working like this : http://prntscr.com/n2pffm .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.single #page-header-bg[data-bg-pos="center"] .page-header-bg-image { background-size: contain !important; }Thanks
ThemeNectar Support Team
Yes, you're right
But how can it works like PAGE header image such as this page : http://www.generikvapeur.com/qui-sommes-nous
I mean without black lines ?
You will have to add in a more squarish image.
Best
ThemeNectar Support Team