Fixed CSS Background-Problems

[hubix]

Affected version

2.0.0

Hi!

1. Problem:

Template: core.less

html {
.xf-pageBackground();
...
}

If a picture is set for @xf-pageBackground while using "background-size: cover;" the Background-Image jumps as soon as the Login-Overlay opens.

Fix for us: Binding the BG-Image to the class ".p-pageWrapper" avoids this problem.


2. Problem:

Template: core_overlay.less

.overlay {
...
.xf-pageBackground();
...
}

Using @xf-pageBackground on this position could lead to not readable texts (or more) problems if the BG-Image is set.

 

[Mike]

It took a bit to reproduce as it I think it may depend on a couple things. Specifically, it was actually the background-attachment that you specified as well. However, I don't see any way of working around this short of moving the background. It's related to the overlays getting their own scrollbar, and thus we need to hide the default page scrollbar to prevent multiple from being seen. This will change the page width and thus how the background is covered.

In terms of #2, overlays are still built out of blocks and is where most of the content will be. However, both inside and outside overlays, we display text directly "on" the page background in some scenarios (breadcrumb, title, etc). Thus, you would need to ensure readability for that text in both scenarios.