Transparent background color in image
Transparent background color in image
How can I delete or make transparent a specific background color in an image or backgroundimage?
For example, I have an image and I want remove all the white pixels in it to show what is "behind" them on the page.
<div style="
background-color: #F4F4F7;
background-image: url('wa.jpg');
background-repeat: no-repeat;
background-position: right bottom;
background-size: 200px 280px;"
align="left">
What functions or attributes can accomplish this?
You don't do it in the CSS. You need to edit the image and make a transparent background.
– trutheality
Jun 9 '11 at 7:44
Internet Explorer can handle this in CSS using the hacky Chroma filter btw.
– Simon
Mar 6 '13 at 13:25
It might be a little impractical, but you could use an html
<canvas>. You could load the image into a canvas, and remove all the white pixels.– starbeamrainbowlabs
Jul 11 '13 at 18:38
<canvas>
5 Answers
5
I believe there is no javascript or HTML o CSS property, attribute or function that can do what you are asking.
You need to remove the background in an image editor and save the image as .gif, or png with transparent background.
I use to do it with Paint.Net but you could do it with whatever image editor you have.
+1 for this one - I would recommend PNG format, which allows semi-transparent pixels as well as transparent pixels.
– Fenton
Jun 9 '11 at 10:24
I tried both a png and gif format and neither of these allow me to insert images with transparant background that remain transparant after inserting them into my html document.
– Nick Res
Jun 5 '13 at 22:11
When setting the backgroundProperty in CSS you can add a transparent background to the div, with the image like this:
background
#myDiv
background:transparent url(myImage);
You can only see through transparent images with PNG format. In your example, you are using a JPG format which does not have the ability to be transparent no matter what you do (unless you're gonna use the opacity attribute in css). Either use .gif or .png when saving an image for you to get the result you want.
add the below line in the css
mix-blend-mode: multiply;
You can see the background color and white pixles will go off
Thank you Krishnamoorthy !
– PhilMaGeo
Feb 12 '18 at 11:42
Here is one way you can achieve this.
Draw your image on a canvas.
Remove all white (or preferred color) pixels.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
i know can do that by photoshop but i want code in css ...
– naser
Jun 9 '11 at 7:44