Member Avatar for Acute

How to create a transparent png or gif file? on photoshop? if yes, can you explain how?

I create 1x1 transparent png/gif file and put it on the box background with y and x repeat, right? is this the idea of transparent backgrounds?

Thnx in advance

Edited by Acute because: n/a
  • 6 Contributors
  • 5 Replies
  • 132 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by windowswarrior0

Dani AI

Generated

Brief, practical notes that build on the replies from , , , , and .

PNG vs GIF and when to use each

  • GIF supports only binary transparency (on/off). PNG supports an alpha channel for smooth, partially transparent edges — use PNG when any semi-transparency is needed. PNG-8 can be smaller but still only binary transparency unless special indexed-alpha is used; PNG-24/32 preserves full alpha.
  • Modern browsers handle PNG alpha correctly; the old cross-browser problem was mainly in very old IE versions, not current Opera/Chrome/Firefox.

Creating a true transparent PNG in Photoshop (current workflow)

  • Make the transparent area actually transparent: hide or remove the Background layer, or apply a layer mask for non-destructive work.
  • Export with an option that preserves alpha (Photoshop CC: File > Export > Export As… and enable Transparency; older PS: Save for Web (Legacy) with transparency/matte set to none). Watch PNG-8 vs PNG-24 tradeoffs: PNG-24 gives full alpha; PNG-8 is smaller but can introduce halos unless handled carefully.

Using a repeating transparent tile vs CSS

  • The 1x1 spacer approach will tile fine, but many modern use-cases are better solved with CSS backgrounds, pseudo-elements, or CSS color/alpha for overlays (e.g., an RGBA background color). If a tiled image is used, avoid a pathological 1x1 tile in tools that re-render every pixel (see ); a small tile (16–64px) with tiny bytes avoids editor redraw problems.

Quick CSS example for a repeated transparent tile:

.container {
  background-color: #fff; /* fallback */
  background-image: url("tile.png");
  background-repeat: repeat;
}

Troubleshooting checklist

  • Confirm the exported PNG actually has alpha (open in image viewer that shows checkerboard).
  • Ensure no server/CMS step re-encodes the file (some uploaders convert to JPG).
  • If edges show halos, re-export with matte set to "None" or use PNG-24/32.
  • If supporting very old browsers, consider fallbacks or polyfills.

Recommended Answers

All 5 Replies

Member Avatar for Riverghost

PNG transparency isn't supported well (i read somewhere that some browsers doesn't support it - opera i think). I guess you try to make transparent background - try RGBA, new in CSS3 - I think that browser support is good now. RGBA def.:

/* standard color without transparency */
background-color: rgb(0, 0, 0);
/* browsers that support rgba will overwrite the first rule - transparency is set in percents divided by 100: 92% == 0.92 */  
background-color: rgba(0, 0, 0, 0.9);
Member Avatar for skald89

I know in Photoshop when you save for web and devices on the top right you can choose to save as png and it has no background

Member Avatar for AlexXxuTzZu

if you want transparent pics always save as PNG file in Photoshop

Member Avatar for Joenade

To save a transparent PNG in photoshop, your image first must be edited to delete the background layer (i.e. the area you want to be transparent). Then use the 'File > Save for Web' option, select PNG-24 as the file type and it will save with transparency.

Member Avatar for windowswarrior0

Whatever you do, don't use 1x1 pixel as your PNG size. I did this and Dreamweaver cs5 was tanking.

Every time I tried to even place the cursor in the text, the program would become non-resonsive because it was trying to redrawn the transparent area 1x1 pixel at a time.

Adobe support didn't even know what the problem was. Use as large a tile your smallest column. I used 200x200 and the file was only 0.25 kb.

Kristi

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.