@Panda You’ll need to do that with js. With some quick CSS changes, it looks like this
d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png
The colour choice is still really hard on the eye, but at least you can now read the text
@Panda the really depends on what you want to do. Are you offering the same skin to everyone, or do you want to have light and dark modes etc?
If the one skin, then this is simple enough, but you’d need a lot of custom css to make this work.
@phenomlab the background is supposed to be different for every user everytime they reload page
but its always covered in light yellow color (alpha .86) so background will always be light
Its just in each skin theres always one text color that is also light
Not sure why you are using a before
pseudonym element to set the overlay. It’s much more efficient to do it this way (for example)
body {
position: relative;
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(https://loremflickr.com/500/500/flame);
min-height: 90%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
The below CSS block should be removed
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 240, 220, 0.85);
z-index: -100;
}
z-index: -100;
is also overkill - -1
is usually always enough as this places the target element behind everything else.
@phenomlab ah…
Chatgpt told me the ::before method.
Thanks for the human input