Appreciate you taking the time to read this
I'm facing an issue where I want to have a background image overlaid on a gradient, but every solution I've tried ends up making the background image transparent, causing a discrepancy in colors. I attempted to switch the "url" and the "webkit-linear-gradient" but that did not solve the problem.
Here's the desired result I'm aiming for: My goal
And here's what I'm getting with my current code: What I get
Here's the background image I'm using, in case it helps: background image
My current code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Battle Royale de la Culture Générale</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
html {
height: 100%;
background-repeat: no-repeat;
background-image: -webkit-linear-gradient(bottom left, #DA07EA, #FB7018), url("background-bubbles.png");
background-blend-mode: multiply;
background-size: cover;
}