13

I'm using background-image to display images but it put a kind of border around the image and I can't get out it.

How can I do that?

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;
  object-fit: cover;
  object-position: top;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="footer-red-bar">
  <img style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)"/>
</div>

Thank you

user3242861
  • 1,839
  • 12
  • 48
  • 93

4 Answers4

21

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>

But that's not the way to do it.

img elements not only need a valid image source trough the src="" attribute, but also the alt="" attribute - which explains to Search Engine Bots and screen readers the subject of the image. A transparent pixel is clearly not something worth an Alternative attribute.

Therefore

  1. use your <img src="image.jpg" alt="Nice green nature">

  2. or use <div style="background-image='url(image.jpg)'"></div>

If you use <img> but need a cover translation like it's done by background-size: cover;...

use object-fit: cover;

Opera Mini has it, so you can expect soon IE/Edge will (eventually) implement that feature too.

object-fit/object-position shipped in Microsoft Edge included in Windows Insider Preview build 16215.

Or use Google and do a research for neat fallbacks.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
6

Using the content css property worked for me:

css

img.my-img {
  content: url(https://www.w3schools.com/css/trolltunga.jpg);
}

html

<div>
  <img class="my-img"/>
</div>

JSFiddle

cider
  • 397
  • 5
  • 11
  • 1
    Simple and elegant solution. This also worked for me base64 image `img.my-img { content:url("data:image/webp;base64,UklG...");` – Cem Polat Aug 20 '21 at 11:30
4

The img tag requires a src attribute. Load a transparent image as the source, and the border will vanish.

body
{
  background-color: grey;
border: none;
}
.footer-red-bar
{
  width: 100%;
  height: 180px;
  margin: 0 auto;
  margin-top: 2em;
}

.footer-red-bar img
{
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="footer-red-bar">
  <img style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)" src="http://antonandirene.com/build/images/about/snow-small.png" />
</div>
Scott
  • 21,475
  • 8
  • 43
  • 55
2

You can also change the img to a div and add:

div.img {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  border:none;
}

JSFiddle

InvincibleM
  • 519
  • 2
  • 12