Is it possible to change the background color of an JPG image in css?

Question

I added a logo I found online, but it seems if I try to change the background color of my page it leaves it unaffected. (the logo background is white, the question is can I only add the logo itself from the picture). Anything I can do to change it?

<div class="logo">
  <img src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/11/gym-logo.jpg" alt="Gym logo" id="header-img">
</div>


body {
  background-color: #ced6e0;
}

img {
  position: relative;
  right: 260px;
  bottom: 50px;
  width: 25vw;
}

https://codepen.io/picklemyrickle/pen/XWjzyvb

Thanks.

Answer 1

CSS can do a certain amount for you, depending on exactly what you want.

As your logo is black and white we can use one of the blend modes (multiply) to remove the white - by keeping the background color - and removing the background color, as it multiplies with the 0s in the black.

Here is an example of using background-blend-mode which changes all the white bits on your image to your chosen background color. If you want to keep the image in an img div (there is probably no need, but just in case) then you can investigate mix-blend-mode instead.

Here's a snippet:

 .logo { background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; background-image: url(https://i.stack.imgur.com/jn3XU.jpg); height: 200px; width: 200px; background-color: #ced6e0; background-blend-mode: multiply; }

 <div class="logo"></div>

Answer 2

The logo you are attempting to show is a jpg file. JPG files do not support transparency. PNG files do however.

Answer 3

The image you're using is a JPG, which does not support transparent pixels (alpha channel) - unlike the PNG or WebP image formats. You'll need to remove the white background from your image using an image editing tool (like Photoshop, or an online alternative). Once you've done that, save your new image as a PNG or WebP, and the image will automatically let through any background colour behind it on your HTML page.

There are many online image editor tools (Google will show you many options), and also free alternative tools to Photoshop, such as Gimp, which you can download for free from https://www.gimp.org/ .

Your logo looks very simple, as it's only using black shapes, so if you have access to the SVG format you can use that one, and removing the background from the SVG is as simple as editing a text file, which you can do in your code editor.

Answer 4

you can use the CSS property mix-blend-mode, but its only currently supported on Chrome, Firefox, and Safari, check this out. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

mix-blend-mode:multiply;

Answer 5

If you convert your logo to an SVG image, you can change the background color easily with CSS. Simply add a class or id to the SVG element:

<svg class="red-background" viewBox="0 0 100 100">
</svg>

Then set the background color to any color you want or set it to transparent using CSS:

.red-background { background: #f00; }