I downloaded a transparent png from findicons.com, and I thought that if I placed this png on my html page, that has a gradient colored background, I would only see the icon (a down arrow in this case).
Instead, however, I see the icon and a white(ish) box surrounding the icon. Have tried setting the background style to transparent or inherit and border to none, but that does not seem to help.
I'm not sure what my problem is here. Is it the fact that I have a body background that is a gradient color ? Is it the fact that I'm using a PNG ?
Is it because the icon I downloaded isn't transparent, even though the site where I downloaded it from says it is ?
Is it because I'm just starting out building a website ?
Please, any suggestions ?
Thanks.
This is a page where I'm trying to achieve this :
Not working example
In your example, your image is within button tag. Button tag have a default background. You can set the background of your button to none, it should work.
Related
I have followed the link Transparent background
Which clearly show how to make the background transparent while showing an image and text on top of it.
However when I load it in my browser and output it to my Video-Mixer the page come as a white page with my text on top if it.
What I need is only the text and image to be sent to my Video-Mixer.
What I presume I need is a browser that does not give a white background,
but gives me a blank background
I have followed the example in the above page.
I looked more on the internet about transparent browsers and found this linkElecton
I would like to have other solutions if any are available
I'm trying to put a png image in the body of my html. The challenge is that my background is grey (for now, but could change) and the png background that is supposed to be transparent is white. How do I tell html to see the image as a png and not a regular image? Can I set it to transparent or do I have to specify a background color (transparent would be ideal if I change my background)?
My code is currently
<img src="{% static 'livestream/images/streamON.png' %}" alt="on" width="300" height="300">
Transparency is not done in HTML, but is a part of the image itself. The browser will see the image as a PNG and display it as a PNG automatically. To add transparency to the image, you will have to edit the file with a graphics editor like Photoshop.
HTML will get the image transparency if there is already.
You can use this to remove the background color without any image tool.
If your image already has a transparent background, but it's inside a button, then that could be the problem. The button's color may be different than your background's color
Use Photoshop, Fireworks (or any other image editing software) to remove the background of the PNG. When saving, you should mark it as having "transparency".
This question has nothing to do with HTML though.
you need to use transparent image. which can be created by using photoshop or any other image editing software
http://i.stack.imgur.com/sCNJW.png
or you can use css transparency as shown in below link
http://css-tricks.com/css-transparency-settings-for-all-broswers/
I am working on a little HTML/Css learning project. Anyway, I have an image that I edited to have no background. What I really did was to 'select by color' the background and then cut it. I think it means having a transparent background.
Suppose I'm right, why do I see it with a white background when I put it on my html page?
And if I'm wrong, how do I go about achiving transparency?
Thanks!
P.s. I've attached the image
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
I want to know if it is possible to affect the opacity of only a certain color in an Image?
For example, I have a PNG image file that has a simple drawing on it (smiley face) and I set the backdrop to the color 'white' only. I want to use the image on a web page, but I want only the smiley face shown (no white backdrop).
Is there a way to do this?
Not in HTML or CSS but what you should do is open the image in a picture editor that supports PNG transparency and set your image background to transparent (or opacity = 0) instead of white.
Not with CSS. The best way to handle this would be to give your smiley face image a transparent background. That way, you could put a colored element behind it whenever you want to change its color.