New to CSS: Applying a background image on top of a gradient without any transparency on the image

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;
}

Answer №1

Consider the following:

background-blend-mode: saturation;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling a rectangle in p5.js: Tips and tricks

In my p5.js code, I created a rectangle using rect(): rect(10, 10, 10, 10); Now, I want to add some style to it with a box-shadow effect: box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff; However, when I tried to apply the style using the doc ...

Discrepancy in Line Spacing in Internet Explorer 9 when Working with TextAreas

My TEXTAREA requires precise spacing, so I've set the formatting as shown below: TEXTAREA { font-family: Tahoma, Arial; font-size: 8pt; letter-spacing: 0px; line-height: 13px; } The issue arises when typing text into the textarea - the li ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

Achieving a seamless scrolling effect using CSS

I recently completed the design of a basic website that includes both mobile and desktop versions. However, I am looking to incorporate some animation into the site to enhance its appearance. One specific feature is a "go up" link at the bottom of the mob ...

Is it possible to superimpose a post-type title onto the featured image?

I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

The process of downloading a webpage onto a computer is not completely successful

I recently created a webpage on WIX and attempted to download it using CTRL+S. However, when I loaded the site from my computer, certain elements were not functioning properly. Is there a specific piece of code that is missing when saving the webpage in th ...

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

Three.js is failing to render within a specified div

My current project involves utilizing three.js to create a cube rendering. Despite the cube appearing on the screen, I am facing issues with getting it to display within the specified div element and in the desired style. HTML: <div id="render"> & ...

Font size too large when using the em unit

The default font-size of my code is set to 10px or 0.625em. According to this, to make the font size of <p> 7px, I should use 0.7em. However, in my case, the browser is consistently using a fixed font size of 9px, even when I decrease the font size o ...

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

Ways to shift pictures sequentially in a horizontal line?

I am currently working on a project in asp.net where I need to rearrange 'x' number of images in a row. To explain the scenario, let's say we have 5 images labeled as 1, 2, 3, 4, and 5. Initially, they are in the order of 1, 2, 3, 4, 5. Then ...

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

Tips for reducing the JavaScript file size outputted by a liquid template generator

Currently, I am working on enhancing the performance of my Shopify website and GoogleSpeed Insights is suggesting that I minify css and js files. However, the recommended files are all created by the liquid template generator, making it challenging to uti ...

Tips for modifying the appearance of a text file within an iframe

Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...