Highlighted

Transparent .png having off-white background added

New Here ,
Nov 10, 2017

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.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Transparent .png having off-white background added

New Here ,
Nov 10, 2017

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.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 10, 2017 0
New Here ,
Nov 10, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2017 0
Adobe Community Professional ,
Nov 10, 2017

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2017 0
Adobe Community Professional ,
Nov 11, 2017

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.

Twitter-Icon-Saved.jpg

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 11, 2017 0
New Here ,
Nov 11, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 11, 2017 0
Adobe Community Professional ,
Nov 11, 2017

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 11, 2017 1
Adobe Community Professional ,
Nov 13, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 1