Responsiveness of background

  • Resolved Hein77

    (@hein77)


    8 years, 7 months ago

    Hi!

    I am making this site: https://www.asselbergsenbaks.nl . I have the background image set on: non repeat and sticky. This works great on a desktop but on mobile and tablet the image is moving with the text when you scroll and you see a big white gap between the footer and the background image.
    What can I do to make this working on mobile and tablet also?

    Thanks in advance!

    grtz Hein

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Out the Box

    (@outtheboxthemes)

    Hi @hein77

    I think the problem might be that the browser on the device you’re viewing it on doesn’t support the background-attachment: fixed CSS attribute which is what anchors the background image.

    A possible work around for this could be to hide the background at mobile size with the following CSS code:

    @media only screen and (max-width: 960px) {
	body.custom-background {
		background-image: none;
	}
}

    You can change the max-width value if necessary.

    Hope this helps!

    Thread Starter Hein77

    (@hein77)

    Thanks for the reply! The above code worked, but I used another workaround: by just clicking the ‘repeat’ option in the customizer.
    On big screens you would see the difference but not so in small onces so this works and this way I can keep the background!
    Thanks!

    Hein

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsiveness of background’ is closed to new replies.