Copy link to clipboard
Copied
I have a transparent png but it doesn't show as transparent in dreamweaver or any browser.
When I roll over it in the code it shows as correctly transparent in the code preview but always has a background in the browsers.
Can't find any answers to this. I tried adding a css transparent background to it but that doesn't do anything either.
Copy link to clipboard
Copied
More info - when I change the background color to another color like blue or something it functions as you would expect with blue in the background and just the image showing properly. But it is always in an off-white box when I set the background to transparent or don't set the backround to anything.
Copy link to clipboard
Copied
Please upload the site a (temporary) remote location and supply the URL so that we can see for ourselves what is going on.
Copy link to clipboard
Copied
Chances are your image is not actually transparent.
Open image in Photoshop. Double click the Background in your Layers panel to make it editable.
Use the Magic Wand wand tool to select the background color. Hit the Backspace key to delete it. You should see a checkerboard pattern denoting transparency.
Go to File > Export > Export As > PNG with transparency. Or use Legacy Save for Web as shown below.
Copy link to clipboard
Copied
It is definitely correctly transparent. If you read the post that is clear. Checkered background in photoshop and the code mouse rollover preview in dreamweaver
Copy link to clipboard
Copied
Nothing is clear until you post the URL to your site online so we can see what you see.
Nancy
Copy link to clipboard
Copied
The only way we can try to help, without seeing your actual page in our browsers, is to guess at what's happening with your code.
My first guess is there's something in your css that is adding the background color to the container the image is in. I would...
1. Open your page in Firefox or Chrome
2. Right click the PNG and choose Inspect Element
3. If you don't see the background-color setting there, select the PNG's parent containers, one at a time, until you find the selector that the off white background-color is coming from (Inspect Element will show you the file and line number as well as the actual selector)
4. Change that selector's background-color in your css file