Blending image/gif to background

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.
random.jpg

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
.blend {

background-blend-mode: overlay;

}
Thank you in advance

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 :rofl:

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

}

Screenshot 2022-03-16 200319

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?

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 (’).

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

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>

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

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