BUG REPORT - Inconsistent backgrounds in certain wiki pages
I encountered this very strange issue.
When I set a background for my wiki pages, different pages that seem identical require different background-size properties.
See for example these two pages:
https://baldursgate-9.obsidianportal.com/wikis/durlags-tower
https://baldursgate-9.obsidianportal.com/wikis/citadel-streets
They are both wiki pages with the same basic structure.
I have the following customer css:
main.main-content div.post-main {
background-color: transparent !important;
background-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/267666/assets/1226751/ScrollRepeat.png?1642108185";) !important;
background-size: contain !important;
}
However, one page needs the background size to be "contain", and the other need the background size to be "cover". This is for the exact same css code, but the results are different.
If I use "contain", they look like this:.png)
And if I use "cover" they look like this:.png)
As you can see, with one option the width is insufficient for one page (background starts repeating, and I can't use no-repeat because it won't be wide enough to cover the text area), and in the other it is too wide (the edge of the scroll image is cut off).
I have no idea what the difference is between this two pages.
The width of the div in both cases is identical and the selector is the same.
Any idea what's going on?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I'm not the best at CSS, but here's my take on this ...
The definition of "cover" says:
cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
So, when your page gets long, the background image is stretching so that one copy of the image fits the entire page ... even if it has to cut a bit off of one of the edges ... which is what's happening. If you (as an experiment) delete some of the text (you can do this with Inspect and delete the elements rather than actually changing the text of the page), then you'll see the background "fix itself" and not be cut off when you get the height of the page to be less than the height of the original background image.
To fix this (I think), you want to set the width of the background image to 100%, so it spans the width of the page nicely, and then, you want to set the repeat to be "vertical" (aka "y"), so that when the page gets long from more content, it just adds another copy of the background image on to the end of the original one. So, I think you want:
Let me know if I'm not making sense.
Obsidian Portal Developer
So, the cause of the issue boils down to the length of the page interacting with your CSS code, the way you have it set up currently the scaling of the background image changes based on the length of your content, the width is being adjusted along with the length (so yeah, basically what Thaen said). That's the answer to what the difference is, to see this effect for yourself inspect the Durlag's Tower page and set display: none on the image at the bottom, you should see the background snap back into place correctly.
Personally, I'd change your CSS as follows: swap out the background-image line for a border-image line with "url("https://db4sgowjqfwig.cloudfront.net/campaigns/267666/assets/1226751/ScrollRepeat.png?1642108185") 55 fill repeat" and I'd get rid of the background-size line completely as it shouldn't be needed.Then your background image will span the entire width and will repeat correctly on both pages regardless of the length of the content. Playing around with the 55 in the border-image line will effect how the repeat scaling looks, so there may be a different value that you prefer.
I've typically had a lot more luck with the border-image approach instead of the background-image approach, background-image doesn't appear to be as flexible overall. Maybe someone else has had better luck with it though?
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
I agree with @Abersade the border-image is more flexible, and more reliable, than background-image
Just trying to help out.
@GamingMegaverse : Great minds think alike, and fools seldom differ.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
This did not have the desired effect:
Now the scroll doesn't have the borders at all and is not stretched for the widge, it just repeats from all directions.
What's interesting is that when I look at that page it looks completely different, the background is still stretched vertically to the point where it's distorted though. I'll look into this a bit further today if possible.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Looked into this a bit further. You appear to have one of the scenarios where border-image isn't going to be feasible, though for the life of me I can't find what I'm doing wrong. I'm still working on it for you with a different approach, just wanted to make sure you weren't left in the dark while you wait.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
This issue is, to me anyways, pretty intriguing. Try the following code and tell me what you think:
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
For best results use this updated image file, it scales and repeats a bit better than the one you are using currently (though it isn't perfect by a long shot). Should be an improvement, though stitching together images is not in my particular skill set so there is still a hard seam visible. Once you've downloaded the file to your own computer please let me know so that I can pull it from my test site media library.
https://db4sgowjqfwig.cloudfront.net/campaigns/116239/assets/1252826/HopefullyImprovedScrollRepeat.png?1651698393
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
The last code you sent seemed to have been better, but there are still differences in width for some reason.
See this page for example:
Compared with this one:
.png)
Actually, upon further review, I believe your code works. I just changed "contain" to "cover" and the issue seems to have been resolved!
I also changed the selector because the current one also included the adventure log, which should not be included there to begin with!
Thank you!
I spoke too soon :(
https://baldursgate-9.obsidianportal.com/wikis/main-pageThere still seems to be some pages that are not working correctly, and I don't know why.
These are the pages I could find:
https://baldursgate-9.obsidianportal.com/wikis/nobility
https://baldursgate-9.obsidianportal.com/wikis/social-conduct
My favorite part of this is that every page of yours that I compare looks different. Thankfully that points to the crux of the issue, which is still the vertical scaling.
Try changing background-size to 100% instead of cover or contain, that worked for all of the referenced pages in my testing.
Also, please don't forget to download that background image if you think it works well.GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Addendum regarding Background-Size: Contain fixed the issue for when the pages were long, cover fixed the issue for when the pages weren't, but neither worked for all pages.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Changing to 100% seems to have done the trick!
I created another image that I think looks even better for scrolling, so you can go ahead and delete yours if you want :)
Thank you!
Happy to help!
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Awesome!!
Just trying to help out.
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member