Hey all, I need some help with learning how to blend an image in css(or in my case, a gif)
I am a COMPLETE noob, so please bare with me as I continue to learn.
I’m trying to blend the image into the background. Here is an example.
I understand that the image is near the “enter” text so it’ll pop more, but I was hoping if there was a way to overlay it of some sorts.
HTML
<img src="Billy.gif.gif" width="200" height="200" />
</div>
CSS
background-blend-mode: overlay;
}
LucLH
March 16, 2022, 9:31am
2
Hi @billyjayboudavong ,
I am not sure if I understood what you are trying to do. What you want is to have your image as a background? If it is this you can use the property background-image in CSS.
Also, I see that you created a class .blend but it doesn’t seem that you applied it to your HTML tag (or maybe you didn’t share the entire code). Do you have a link to share for your work?
Thank you, LucLH
I should have given a little bit more detail. I probably would have gotten more responses
<!DOCTYPE html>
<html lang="en">
<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>Wow cool practice</title>
<link href="Practice14.css" rel="stylesheet" type="text/css" />
</head>
<div>
<h1>Billy B.</h1>
</div>
<body>
<a href="https://www.imdb.com/name/nm7049190/">Enter</a>
<div class="blend">
<img src="Billy.gif.gif" width="200" height="200" />
</div>
</body>
</html>
CSS
h1 {
font-size: 144pt;
text-align: center;
color: rgb(123, 123, 230);
margin: 50px;
text-shadow: 2px 2px 40px rgb(2, 3, 8);
}
a {
font-size: 72pt;
color: rgb(123, 123, 230);
text-align: center;
margin: 50px;
text-shadow: 2px 2px 40px rgb(2, 3, 8);
}
body {
text-align: center;
background: rgb(236, 76, 76);
}
.blend {
background-blend-mode: overlay;
}
So I’m trying to figure out if there is any way to alter my gif to match the background color through CSS. As in remove the white?
Roma
March 17, 2022, 4:39am
4
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (’).
Roma
March 17, 2022, 4:46am
5
There are tools you can use. Search for something like remove background from image . I’ve used the first one in the list (that’s not an ad) and it’s been good for what I’ve wanted to accomplish. ymmv
Though with your background color of choice and that image parts of it may blend into the background and get lost. Kind of like having light grey text on a white background.
Hope that helps.
Thank you, Roma! I appreciate the help. I’ll try that.
-B
ALLESS
March 18, 2022, 3:56am
7
You are needing BLEND-MODES:
There may be browser compatibility issues with this CSS Filter
Here are two sites that allow you to experiment and Generate with the Image Filter Blend Modes:
https://ilyashubin.github.io/FilterBlend/
https://www.cssfiltergenerator.com/
THE CODE FOR THE IMAGES ABOVE
<html>
<body>
<style>
.image-front {
background-image: url("https://www.pngitem.com/pimgs/m/468-4687320_goku-super-saiyan-pixel-art-hd-png-download.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: #ff7f50;
background-blend-mode: multiply;
filter: saturate(2) grayscale(0.5) brightness(1.5);
width: 100%;
height: 700px;
}
</style>
<div class="image-front">
</div>
</body>
</html>
ALLESS
March 18, 2022, 4:24am
8
CODE VERSION WITH MOVING GIF:
<html>
<body>
<style>
.image-front {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/e99c5e88-dffd-44a3-a13c-2f9a4458d2f3/da1hz3b-e2883477-3e9e-46ce-af48-8c544c1673c4.gif");
background-repeat: no-repeat;
background-size:100%;
background-position: center;
background-color: coral;
width: 100%;
height: 600px;
background-blend-mode: multiply;
filter: saturate(2) grayscale(0.5) brightness(1.5);
}
</style>
<div class="image-front">
</div>
</body>
</html>
Wicked! Thank you very much. That’s way too cool.
-B
1 Like
ALLESS
March 18, 2022, 5:22pm
10
They are cool. I hope, over time, that more filters are put out.
This page has some interesting text effects with background-blend-mode.
https://forum.freecodecamp.org/t/mix-blend-mode-not-working-help/328899/7
1 Like
system
January 17, 2023, 3:56pm
12
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
