CODEWITHSUNDEEP
htmlcss
Muhammed Misir
Muhammed Misir

Reputation: 481

CSS Image border Remove

I just trying to solve the problem.

enter image description here

CSS:

.default-img > img {
    height: 100px;
    width: 100%;
    background: url('bg.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border: 10px solid black;
}

I have a white "Border" (Inner Border?) in the Image tag and i cant remove it. The Black Border is set manually to show you the Problem and the Red Content is the included image.

How can i remove the white inner border from img tag

Upvotes: 2

Views: 5581

Answers (4)

Jorge Fernandes
Jorge Fernandes

Reputation: 31

The img creates that border when you have a background but not a source.

To solve this issue move that background to a div :)

Upvotes: 3

Tom Esch
Tom Esch

Reputation: 36

Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?

Upvotes: 0

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

  • Open up a image editing software. Re-crop / re-save your source image being rendering from 'background: url('bg.png');' background property. So, the 'bg.png'.
  • Another thing you can do if you don't want to do above. Nest another <div> around your initial .default-img <div> and set the heights and widths to crop out the white. Make sure to set property overflow:hidden;
  • In some rarer cases a white line or (outline) can be induced around elements as a browser quirk. Test your element across browsers (and maybe even devices too) to target if it's something browser specific. Then target that browser and remove. ie. outline { none; }

Hope this helps, g'luck!

Upvotes: 2

Aleksander Rezen
Aleksander Rezen

Reputation: 927

is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.

Upvotes: 0

Related Questions