I'm using transparent forum icons, but I've a problem with the white background of the image:
How can I remove it using CSS or a software?
Thanks.
Are you trying to make your image like this where the white is transparent?
Photoshop took about 2 seconds. Select the white and delete it.
Save the images in the .PNG format. JPEG images can not handle transparency. Photoshop has this capability.
If you are attempting to re-size the image after being inserted, then try the following code in the css part -
background: transparent url("/static/img/image.png") center center no-repeat;
Okay, the problem is now fixed. I changed the white background to the same background of my element: http://prntscr.com/5upc73 and http://i.imgur.com/LcHwecs.png
Related
Shrimp image with transparent background
So I have an image of a shrimp with a transparent background. Meaning that when i render it it supposed to only show the shrimp and not the transparent background. I'm trying to render it in a webpage using html and css. How can I render the image in my webpage and making sure that the transparent background doesn't show it becomes transparent and shows whatever is behind the image other than the shrimp itself.
Thanks!
the background in your image is NOT transparent, it's just look like...
Your image is a PNG file but it does not have a transparent background. Try to use photoshop to remove the background. :)
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 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 want to have a box with two colors with silver on top and it should slowly fade into white, just as Apple's homepage background. How do i do that?
Thanks as always.
If you want to use CSS3 here's a great example: http://css-tricks.com/examples/CSS3Gradient/
W/o CSS3, you have to make do with an image repeated horizontally (x-repeat), similar to what tvanfosson said.
you are looking for gradient background?
http://www.tizag.com/cssT/background.php
look for "css gradient background"
there are more articles if you google: gradient background css
The basic idea is to use a background image that does the gradient for you. You sent the background color of the page to the "end" color of the gradient, then apply your gradient background image using CSS with a repeat in the opposite direction that you want the gradient to flow. So if you want a 100-pixel, silver to white, gradient from top to bottom you'd create a 100Hx1W pixel image that spans your colors from top to bottom. Set the background color to white and apply the background image repeating across the x axis. You can easily create the gradient using the gradient tool in Photoshop or GIMP.
#body
{
background: #ffffff url(/images/bg.jpg) repeat-x;
}