1

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.

theknightD2
  • 321
  • 6
  • 17
TheOctagon3322
  • 27
  • 1
  • 3
  • Try using this tool: https://www.remove.bg/ – m4n0 Apr 04 '21 at 15:38
  • try between tags in the head – Met Br Apr 04 '21 at 15:40
  • CSS can change the colors of images to a certain extent, but not get rid of color (i.e make transparent) altogether. Are the white bits that are sort of scattered in the figure itself to take on the background color or to stay white? – A Haworth Apr 04 '21 at 16:15
  • Does this answer your question? [Transparent background in JPEG image](https://stackoverflow.com/questions/16906144/transparent-background-in-jpeg-image) – theknightD2 Apr 04 '21 at 16:15

5 Answers5

4

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
2

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

theknightD2
  • 321
  • 6
  • 17
  • Hi, not sure why you say CSS does not change the look of images. The blend modes can do that, and as this is a black and white image it's fairly simple to use them to some effect (depending on exactly what the question requires). Also there is masking for example. – A Haworth Apr 04 '21 at 16:51
  • I was not aware of that. Thank you! – theknightD2 Apr 04 '21 at 17:03
1

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.

robertp
  • 3,557
  • 1
  • 20
  • 13
0

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;

Andrew
  • 1
0

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; }
HackerFrosch
  • 1
  • 1