Tagged: custom background image
Hi,
The custom background image in the header will not shrink on the mobile menu. Is there a way to make this scale down or disappear on the mobile menu all together, while remaining on the desktop version?
Hi hollymedwid1!
Your talking about the red telephone number you have set as the header background correct? Your wanting to hide it on mobiles? If so then add this to your custom CSS.
@media screen and (max-width: 767px) {
.responsive #top .header_bg { background: white !important; }
}
Cheers!
Elliott
Hi there,
I tried the solution above but it didn’t work for me which leads me to believe I have a different problem.
Under Enfold > General Styling > Custom Background Image I am using a file that is 815 x 315.
It looks fine in a desktop browser but won’t resize on mobile. It’s as if only a portion of the image is viewable.
Is there anyway using the @media screen css function to resize this or if not, what should I try instead.
Thanks,
Gabe
Hi!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) {
.responsive #top .header_bg {
background-position: 70% 50%;
}}
You can also add a widget area to your header by referring to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
Cheers!
Yigit
Hi there,
Thanks for the help. This made things a bit better but I still can’t see the entire background image. Is there anyway to shrink the image as well as reposition it or do I need to use the widget area to accomplish this?
Thanks.
Hi!
Instead of adding the number as background, please add it as a widget. Follow the steps provided here: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
Cheers!
Ismael