• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Transparent .png having off-white background added

New Here ,
Nov 10, 2017 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

2.0K

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
community guidelines
New Here ,
Nov 10, 2017 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.

Votes

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
community guidelines
Community Expert ,
Nov 10, 2017 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Nov 11, 2017 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Nov 11, 2017 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

Votes

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
community guidelines
Community Expert ,
Nov 11, 2017 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Nov 13, 2017 Nov 13, 2017

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines