Archived topic
Background header image not applied on mobile header?
3 replies · Started by Michel on March 15, 2021
Hi,
I placed a background image on my site's header (using the Backgrounds Premium plugin). This is working fine, including on mobile.
But if I switch the "mobile header" option on (which I need, in order to use a different logo), then the background image is no longer visible.
When I look at the page code, I see that the background image is indeed applied to the .site-header, which is not displayed on mobile.
If I place a background image on the Primary Navigation, then my mobile header has a background, but it also affects the main menu elements.
How to proceed to just have the same image on mobile header without changing the main computer menu? I know I can "hard code" this with CSS, but is there a "proper" way of achieving this through the Customize UI?
Aside: If I use Elements to create a header hero it works also on mobile. But I cannot use this for all pages. There will be some custom hero header images on some pages, but I need a default header background for all the other pages.
Hi there,
the Header Background only applies to the Site Header on desktop. Mobile header replaces that.
The simplest option would be to use a little CSS:
#mobile-header {
background-image: url('full_url_to_your_background_image');
background-size: cover;
padding: 20px 0; /* Optional add some top and bottom padding to header */
}Thank you David for your quick reply.
I'll use CSS then.
Michel
You're welcome
