PRO RC Issue with Fixed Background

Beta
#1

Hi there,

Just wanted to report that it seems there is an issue when having a fixed background CSS in place that it isn’t listening to any of the CSS in place on the section.

Scenario is: section has a lower level background on it, the background is a large image and is set to size: cover position: centre. When the CSS below is added into the Global CSS then any settings I add to the lower background section such as changing the size and position etc doesnt seem to take effect in the preview or live site.

.x-bg-layer-lower-image {
  background-attachment: fixed;
}

There also seems to be a glitch in Safari - the background images are zoomed in like 1000%, both on mobile and iPad it seems (not sure about Desktop).

Secure note for URL.

Thanks, Tom.

#2

Hi Tom,

That’s an unfortunate reality of how background-attachment: fixed; works. It doesn’t honor the position anymore because the attachment rule fixes it to the viewport. It will also scale considerably because it’s using the viewport to size it. You could try using the Parallax setting included with the background image layers.

#3

It seems odd though as works fine on Android? Or is this a Retina issue?

Thanks.

#4

I think it’s just less noticeable on smaller screens because they are more suitable to the image you’re using. If you try a full screen on desktop you’ll probably see it stretched out and distorted.

#5

Thanks Alexander.

Yeah, whilst the issue isn’t happening on any other device other than Safari it does seem to be CSS and therefore nothing can be done.

The effect of fixed background is so good it is a shame you cannot set it to be 100% size all the time etc and therefore stop the image distorting :(.

It seems to just zoom in 1000% on iPhones and iPad’s and is fine on the same size screen Android device - and is fine on Desktops and Laptops.

So annoying :frowning:

#6

I understand. So it would take a bit more to setup, but another approach you might want to try is setting your background layer type to “Custom”. Then you can write your own HTML perhaps including a div with a background image you have full control over and isn’t effected by theme features. You might have better luck customizing that than adding CSS to the background image layer.

#7

Thanks Alex,

I just can’t see a way around this, the W3 school website seems to revert to no parallax if the browser is Safari.

This is the outcome on all my devices excluding iOS and iPad OS and Safari.

image
image1940×833 266 KB

On Safari, iOS and iPad OS:

image
image740×612 165 KB

Source: https://www.w3schools.com/howto/howto_css_parallax.asp

As mentioned then it seems to be just a restriction of CSS, but then I see this website (built on Wix) able to achieve it fine on Safari etc and on desktop etc.

Confused Tom :frowning:

Thanks, Tom.

#8

Hi Tom,

I’m not sure how Wix does it, but sometimes there’s more going on or even javascript at play. I’m sorry, custom parallax like that is outside the scope of support we can offer, and I can’t really take time to troubleshoot or advise further at this point. Hopefully with a bit more experimentation and research you’ll have it figured out, or maybe anyone else in the forum might have some ideas on this.

#9

No worries!

Thank you!

I will review and come back with an update asap.

Thanks, Tom.

#10

Thanks Tom! I’d would certainly be curious if you figured out the solution here but certainly no pressure/obligation - just hoping you’re able to get the effect you want after it all.