Background Image behind header on Mobile Site

Is it possible to cause the background image to appear behind the header on the mobile rendering?

The background image appears behind the header on the desktop browser version perfectly! The entire page including the header displays the background image as just ONE picture which fills the entire screen. See screenshot:

But on the mobile rendering, the background image is not visible in the background. See screenshot 2:

What can we do? Thank you in advance!

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 1024px) {
  .site-header {
    position: absolute !important;
    background-color: transparent;
  }
}

Regards,
Kharis

Thank you, Kharis for your very timely response and help. I installed the code provided and I have left it in place.

When the mobile site first loads - it works. The background image covers the whole screen without repeating, etc. See screenshot 1:

BUT! as soon as you start to scroll down, the screen flickers - and then the background image reappears separately in the header and repeating vertically in the page below the header. See screenshot 2 & 3:

& 3:

So we only have a partial success. BUT! if there is a way to cause the background image to display in the mobile version with the same settings it displays by in the desktop browser version (Center/Center - fixed…) it is my guess that it will resolve this glitch.

The theme shouldn’t require all of this repair code to function. It should just work. So if we can solve this glitch it will be one more improvement for the next upgrade release.

Thank you much, Kharis.

Dan

Hello Dan,

I found an Elementor section has same background image. Maybe you should disable it in the element setting. Or you can force disabling it with this CSS code:

.elementor-14 .elementor-element.elementor-element-2e18d52 {
  background-image: none !important;
}

Regards,
Kharis

Genius catch Kharis! You pulled the rabbit out of the hat!

I removed the background image from the Elementor page/section. I can see how this caused a problem.

We have made significant progress and I thank you.

Here are my two remaining problems. 1) when I reduce the size of my computer browser to cause the site to switch to the mobile rendering the background image remains fixed - and the page content scrolls up with the background image stationary. (absolute.)

See screenshot 1:

BUT! On my cell phone (iPhone 5) the background image still scrolls with the page content. It is not fixed.

See screenshots 2 & 3:

Also, there is a very strange “jump” glitch on the mobile rendering. When you start to scroll down from the top of the page the content suddenly repositions to lower on the screen. At the same time the background image suddenly changes and appears more zoomed in.

It is very awkward to say the least.

So, is there any way to keep that background image fixed - even on a cell phone?

And is there anyway to remedy the awkward content “jump” and sudden background image zoom when scrolling down?

Sorry to be so picky, but I think you agree, everything I am trying to accomplish should just work automatically with the theme, right out of the box…

Thanks a million, Kharis.

Dan