Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

Avatar for Username

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo
Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.
Argivearre

background-blend-mode is no longer functioning as it should with color option

Firefox Websitedefekten
zeroknight beäntwurde
szalaimd
szalaimd

Hi,

I created a website with a pretty simple css in the body of the page. I have a background image, but its colors are too dominant, so I also added a background color property to make the background more "pale". This approach worked perfectly in Chrome and I am 99% sure that I also tested this back then in Firefox and it worked as expected.

Now, only a white background is displayed in Firefox (Chrome works perfectly), which is interesting, because nor the image nor the set colour is white (well... the colour is white, but it is semi transparent). Did I miss something or is this an accidentally added bug in Firefox?

For your reference I attach a minimal working (in Chrome the paler background is displayed properly, in Firefox white page) example (note: change image url to whatever):

html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

css:
body{
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0;
    flex-direction: column;
    background-image: url(./resources/splash.jpg);
    background-position: center;
    background-size: cover;
    background-color:  rgba(255,255,255,0.1);
    background-blend-mode:color;
}

I appreciate the help, Mark

Hi, I created a website with a pretty simple css in the body of the page. I have a background image, but its colors are too dominant, so I also added a background color property to make the background more "pale". This approach worked perfectly in Chrome and I am 99% sure that I also tested this back then in Firefox and it worked as expected. Now, only a white background is displayed in Firefox (Chrome works perfectly), which is interesting, because nor the image nor the set colour is white (well... the colour is white, but it is semi transparent). Did I miss something or is this an accidentally added bug in Firefox? For your reference I attach a minimal working (in Chrome the paler background is displayed properly, in Firefox white page) example (note: change image url to whatever): html: <pre><nowiki><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <script src="script.js"></script> </body> </html> css: body{ height: 100vh; width: 100vw; justify-content: center; align-items: center; display: flex; margin: 0; flex-direction: column; background-image: url(./resources/splash.jpg); background-position: center; background-size: cover; background-color: rgba(255,255,255,0.1); background-blend-mode:color; } </nowiki></pre><br> I appreciate the help, Mark

Bewurke troch cor-el op

Alle antwurden (1)

zeroknight
zeroknight

It works for me. Blending can be affect by graphics driver bugs, does it still happen in Troubleshoot Mode?