Member Avatar for janicemurby

hya im wanting to remove the white spage in the pic included so you can see the pattern in the background ive tried putting the following
opacity: 0.4;
filter: alpha(opacity=40);

in the css for this but its not doing anything what will make the white disappear

ty jan x

letsswing.png 98.53 KB
  • 6 Contributors
  • 9 Replies
  • 202 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short diagnosis and a few practical fixes.

Setting the image’s overall opacity only makes the entire graphic see-through — it won’t turn the white areas into “holes.” As discovered, you need either an image that actually has an alpha channel (true transparency) or a different compositing approach. Several helpful directions were already suggested by , and , and even supplied a cleaned file — below are concrete, non-duplicative steps and a couple of CSS workarounds.

If you can edit the artwork

  • Extract the foreground so the white background is removed and keep the anti-aliased edges as an alpha channel. In Photoshop/GIMP use a selection method (color-range/quick select or pen + mask), refine the edge (Select and Mask / Refine Edge), output to a new layer with mask, then remove any matte/fringe. In Photoshop try Layer > Matting > Remove White Matte or use Defringe(1–2px) if you see a faint halo. Export using an option that preserves alpha (no background matte) and test the PNG over the actual page background at 100% to confirm edges look correct.
  • If the logo is simple shapes or text, recreate or trace it as a vector (SVG). That gives crisp edges at any scale and avoids raster alpha problems.

If you can’t edit the source image

  • A CSS blend-mode can sometimes hide pure white without editing the file. This is a browser-side hack and not a substitute for a proper transparent source:
.logo-img { mix-blend-mode: multiply; }
  • For more control, use the image as a mask so the alpha acts as the cutout (better for one-color logos), but check browser support for your audience:
.logo-mask {
  background: url('pattern.png');
  -webkit-mask-image: url('logo.png');
  mask-image: url('logo.png');
  mask-repeat: no-repeat;
  mask-size: contain;
}

Notes and troubleshooting

  • “Snail trails” or white fringes are almost always matte left from anti-aliased pixels premultiplied against white. If you still see them, re-open the source, remove matte/defringe, or recreate the logo as vector. Test on the actual site background before finalizing.

Recommended Answers

All 9 Replies

Member Avatar for Member #120589

Hmm. Maybe with a different image

Edited by Member #120589
Member Avatar for janicemurby

yes theres the background image then the logo on top but want where background shows through the white of the logo image hun

Member Avatar for Member #120589

I was referring to the subject matter. he he. Hun.

Edited by Member #120589
Member Avatar for donz365

uum theres an idea for an App :)

If the white is part of the image you will have to edit it in Photoshop by selecting and deleting the background and save as a .png.

If the white part is the color of the div the image is in did you try setting the background color to transparent in css

.nameOfDivClass{background-color: transparent;}

Member Avatar for Kumar_K_K

Clean the images in the photoshop...

Member Avatar for Member #120589

Clean the images by taking the naked women out of it.

Member Avatar for Albert Pinto

Magic Wand Tool in photoshop will do the needful...... There are lot of video tutorials on youtube...
Or if its not precise... photoshop has...Pen Tool...

Save as .png image

Regards

Edited by Albert Pinto
Member Avatar for Simon180

will this do for you?

I removed white background it has trasparent setting now so should fit any color scheme.

Edited by Simon180
Member Avatar for Member #120589

Did you manage to get rid of those weird snail trails too? WTF are they?

Let's hope that she's still around after 2 weeks to pick up the image

Edited by Member #120589
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.