Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to trim the edges of an png image with CSS (if possible)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #265592
    Laurentiu
    Participant

    Hello people,

    I’m struggling with a difficult part on my code and I want to know if this is possible or not. As the title says I want to trim the edges of an .png image so the background to disappear from the exterior and only the interior to remain colorful . I didn’t try with images before but I hope I will get a solution from you (any !) Here is the code.

    https://codepen.io/Laaur/pen/YYJzRj

    PS. I tried with overflow: hidden in many ways, no result.
    Thank you in advance ! :)

    #265614
    coder007
    Participant

    That’s not topic but why can’t I write a new thread?
    Can someone tell me?

    #265619
    Beverleyh
    Participant

    Im not 100% what you’re describing but maybe clip-paths will help? https://css-tricks.com/almanac/properties/c/clip/

    #265642
    Paulie_D
    Member

    Yeah…that seems to be what is required.

    My interpretation is only the inner part of the “parrot” image should be flashing background colors.

    You definitely need a clip path for that…or just edit the image in you favorite imaging program and add a background outside the parrot.

    Clip path or SVG would be the way to go.

    #265643
    Laurentiu
    Participant

    Yes this ideea just came up to my mind too. I will make the outer layer white and background of the div also white and the inner parrot will be blank and then I will save the image as .png !

    Thank you all :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.