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
Related
I added this svg logo to my website. I saved it in illustrator with not background and when it pops up in the web browser its has a white background. Not sure how to fix this or what the problem may be.
heres what it looks like on my end
Here is a fiddle
https://jsfiddle.net/n3ov9czj/
<img src="images/logo.svg" />
Is this what you are trying to do?
Jsfiddle 1
Or was it more like this?
Jsfiddle 2
This obviously didnt work :(
svg { background: transparent; }
It looks as if your linked image (logo?) black areas are actually transparent, showing the background. White areas are actually the (logo) image. It's kind of a negative youre trying to accomplish in that case, I guess. I can see some text behind the letter h. It would be really more helpful with the actual svg logo image to figure out the problem.
Simply test colouring the image background.
<img src="images/logo.svg" style="background-color:grey"/>
If this is the case, then you probably want to apply the background image behind the logo or whatever was the idea you want to implement.
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'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
I have a question, since I couldn't find any solution yet.
So I have this image, which is fully transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.
I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.
Thank you very much guys,
Mark
EDIT:
http://i.imgur.com/yMRxtqY.png
So to be more precise, I've created another image, what I want to achieve.
At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.
The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.
This is all I got: http://i.imgur.com/g7xpgQG.png
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )
Not sure if this is what you're looking for, but take a lok at this link : http://css-tricks.com/transparency-in-web-design/
You might have to take a look at the PNG file format you're using.
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.