Use The HTML <Img> Tag as a Background Image Instead of The CSS Background-Image Property

When to use IMG vs. CSS background-image?

Proper uses of IMG

1. Use IMG if you intend to have
   people print your page and you want the image to be included by default.
   —JayTee
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

1. Use IMG plus alt attribute if the image
   is part of the content such as a logo or diagram or person (real person, not stock photo people).
   —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG
   for multiple overlay images in IE6.
4. Use IMG with a z-index in order
   to stretch a background image to fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

1. Use CSS background images if the
   image is not part of the content.
   —sanchothefat
2. Use CSS background images when
   doing image-replacement of text eg. paragraphs/headers.
   —sanchothefat
3. Use background-image if you intend to have
   people print your page and you do not want the image to be included by default.
   —JayTee
4. Use background-image if you need to improve download times, as
   with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

Use the HTML <img> tag as a background image instead of the CSS background-image property?

To make an almost perfectly duplicate of the features used for background-image, we've to consider the features of the img include:

• It doesn't have any pointer events.
• It's rendered at least one layer below the div.

The result would be something like this:

div {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

p {
  padding: 25px;
}

<div>
  <img src="http://via.placeholder.com/720x480/ddd/007" />
  <p>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book
  </p>
</div>

html <img> tag instead of css background-image

You can give the img a z-index and everything else a higher z-index.

img { z-index: -1; }
.banner-options: { z-index: 0 }

This will put img farther in front, but .banner-options even farther.

How do I set an image background, using the <img> tag rather than CSS?

Just put the img in the col container, set that element to position: relative; then use absolute positioning to put the text over the image.

* {margin:0;}.col {  float: left;  width: 25%;  position: relative;}img {  display: block;  width: 100%;}.overlay {  position: absolute;  top: 50%; left: 50%;  transform: translate(-50%,-50%);  background: black;  color: white;  padding: 1em;}

<div class="col">  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">  <div class="overlay">    <h2>text</h2>  </div></div><div class="col">  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">  <div class="overlay">    <h2>text</h2>  </div></div><div class="col">  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">  <div class="overlay">    <h2>text</h2>  </div></div><div class="col">  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">  <div class="overlay">    <h2>text</h2>  </div></div>

How to cover a div with an img tag (like background-image does)?

Use object-fit:cover to not lose ratio.

div {
  border: black solid;
  width: 400px;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

<div>
  <img src="//lorempixel.com/100/100" />
</div>

how can I call background-image as <img src>

The style is

background-image

Not background- image

And you refer to a 'https' link which will return no picture at all
(I tried to your link, it gives an error)

EDIT

The https means that the url you access is securised, which means that you can't access its content without login in.
Thus, the picture you wanna access in secured. You can perhaps see it if you login, your visitor wont because they cant access it.

If you want a picture to be background, either link it from your website

background-image:url(images/bg.jpg);
width:100%;
height:100%;

Either take the url from a website WITHOUT https

I recommend you to use either google for pictures, or wallbase.cc which is a good one too
And as a little advice i can give you:

background-image:url(YOUR URL HERE);
background-size:cover;

The background-size:cover will make your background always the right size if you change your window's width and height, it's perfect for smaller/bigger screen

---

Related Topics