how do i remove white spaces around an image? - html

Question

I'm trying to use this image as part of the navigation bar, but the problem is there are big white spaces around the image and I cant remove it. I've tried setting the margin and padding to 0, it doesn't work.
This is what it looks like:
UPDATE: HTML & CSS CODE
HTML
CSS
2ND UPDATE
I finally solved the problem guys.. thank you to everyone who helped!

Answer 1

you could try to crop the image. Otherwise you can make use of CSS.
For example:
<style>
img {
position: absolute;
clip: rect(0px,60px,250px,10px);
}
</style>

Answer 2

You could use CSS and play around with the background-size & background-position properties, like this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 700px 700px;
background-position: 419px 438px;
border: 1px solid red;
}
<div class="image"></div>
Using the Gimp Image Editor I have cropped your original image and used that as the background instead, this is what it looks like:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/MaYMF.png');
background-size: 120%;
background-position: 112px 115px;
border: 1px solid red;
}
<div class="image"></div>
The image you provided above is way too large, meaning that when you crop it the cropped image will be a low quality image. I'm sure it would be far easier and if you used a software like Gimp Image Editor or Photoshop to modify your image your self to get the specific image you wanted down to the pixel and you could simplify the my CSS to get this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 100% 100%;
background-position: center center;
border: 1px solid red;
}
NOTE: the red border is used to help you better see where the image is.
NOTE: the red border is not required to make this work.