How to Remove The Border Around an Image Without a Source

How can I remove the border around an image without a source?

What I could suggest is in case not having a src="" remove it and you can

img {
    display: none;
}

img[src] {
   display: block;
 }

or if you know like the url contains some special word, like http you can do:

img[src*="http"] {
    display: block;
}

How remove border around image in css?

Try this:

img{border:0;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0;}

More information about the border css property can by found here.

Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.

How can I remove border from img tag?

Can you use alt element for remove that border.

<img src="kansdkans" alt="My Image Here" />

CSS Image border Remove

• 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!

Unwanted border around image which isn't a CSS border or outline using Bootstrap 4

Ofcourse the border line will come. Why because you haven't added the src link for image tag

<img class="i-home"> : missed src. Eventhough you have added the image via background, you have to pass the src inside image tag. If not the browser will consider as Invalid Tag declaration. So by default the missing image will indicated with border surrounding

Solution1:

pass an transparent image in src link <img class="i-home" src="transparent image link">

Solution2:

Replace the image tag with the span tag <span class="i-home"></span>

How to remove a border of background-image

Use the src="" attribute instead of background-image

That's the usual border of the Broken-Image asset that you get when you don't provide a valid src="" attribute and the image cannot be found.

A BAD solution is to use a 1x1 transparent pixel - or equally a base64 representation of the same:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

than it would look like:

body{  background-color: grey;}
.footer-red-bar{  width: 100%;  height: 180px;  margin: 0 auto;  margin-top: 2em;}
.footer-red-bar img{  width: 100%;  height: 180px;  background-size: cover;  background-position: center;  background-repeat: no-repeat;}

<div class="footer-red-bar">  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"        style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)"/></div>

how can i get rid of an unwanted border around bg image?

Use below code it will remove all problem, on using '*' selector it will apply to all the elements in the DOM.

*{
    padding: 0;
    margin: 0;
}
body, html {
    height: 100%;
    color: #cccccc;
    text-align: center;
}

.bg {
    /* The image used */
    background: blue;

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

How to remove border from image in chrome?

Why do you set image as background to the img tag? You should use the src attribute (which is required to have valid html) to define the image url.

<img class="image" src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>

If that is not possible for some reason, consider using div instead of img to achieve the same effect.

<div class="image"></div>

---

Related Topics