How do i crop an image using HTML and CSS?-CodePudding

I would like to add an image to my website like in this example -> Cropped image

How do I crop the image? If i am using a .png image, i'm still seeing the black/white background. Is there a way to have only the man without the background using HTML & CSS?

CodePudding user response：

If I understood correctly, you want to use a picture without any background. for this, you should use a transparent png like this:

body{
  background:lightblue
}

<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>

And if you want to add your voluntary color to the picture background like your sample:

img{
  background: linear-gradient(45deg, #cb2d2d, #172aec);
}
body{
  background:lightblue;
}

<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>

But if your picture isn't transparent, I think you must make it transparent on photoshop at first.

CodePudding user response：

To my knowledge, there isn't a way of doing this through CSS or HTML. There is no inbuilt function to do this. So the only way to achieve this is by removing the background of the image by a third-party service like remove.bg or apps like photoshop etc.. (preferred to use Adobe Photoshop and use the pen tool, Magic wand tool or Quick selection tools for removing the external background of the image.) and then downloading it as a png and then uploading to your website.

Here I will mention some usefull softwares and websites for removing backgrounds, which are top rated and which maintains the quality of your image.

Once you get the png image, you can directly put it into your website. If you still see some white background altering over the image, use background-color: transparent.