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.
Related
<img src="images/arch_bluev2.png" title="arch_blck logo" alt="arch_blck" width="80" height="80">
`
There must have not been white background. Instead it should have a transparent as the image itself is transparent and is of png type.
If the image is the same as the one you had uploaded in post, than the background is not really transparent. It just looks like. I quickly transform this to be transparent.
The issue was with the logo background itself as it was not really transparent. After downloading genuine transparent png file, things went perfectly. Thanks everyone !!
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.
I've searched this on here as well as on google and can't seem to make it work. I'm trying to put images directly on top of another. This is for the menu of the site. I've tried using the z-index, which i believe I am using wrong. So I'm trying to simply set the one image as the background of the div.
here is my current code:
first the html:
<center>
<div id="menu1">
<img id="homebutton" src="./images/newmenu/homebutton1.png">
<img id="registerbutton" src="./images/newmenu/registerbutton1.png">
<img id="aboutbutton" src="./images/newmenu/aboutbutton1.png">
now the css:
div#menu1{
background-image: url('./images/newmenu/menubar.png');
}
The background image which is the solid red bar with gradient does not appear. Here is a screen shot of the page.
as you can see the buttons load but the background does not. If someone could please tell me what I'm doing wrong it would be greatly appreciated.
Your links have images in them (with the navigation text I assume). The background of those images is going to appear over your background image, so your background image will not be seen.
Have to change the question entirely upon discovering the cause.
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 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>