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/
Related
I have an image and the background is white. how can i remove the white background?
This is my code:
<img src="Galactic empire.png">
And this is my output:
You can use ether photoshop and have image without background or use site like RemoveBg, to do the same, Might Help:)
If it is a png image, it automatically eliminates the checkered background. Use another image or edit the current image in Adobe Photoshop.
On a valid background, I need to add transparent holes/images that shows body background.
Like this websites;
skrill.com
skrillex.com
I can add it as a image but I should resize it according to resolution. Also I'll add some descriptions under this images.
Is there any way to do this?
There are three ways to achieve this effect:
Make the solid background a SVG or PNG, with holes cut through to show the underlying background.
Make the transparent images replicate the background.
Implement the background with <canvas> and use JS to achieve this effect by dynamically redrawing the background.
The sites you linked are using one of these approaches.
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.
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.