img src and img url usage in css and js

Question

i am trying to display an image on my html page, and noticed that if i want to add the image using CSS i had to use

.jumbotron {
  display: flex;
  align-items: center;
 background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');
  background-size: cover;
}

and for the same image on the html page i had to use :

<div class="row">
      <figure class="col-sm-6">
            <p>Kitchen</p>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg">
      </figure>
  </div>

so what is the difference here and why do each file loads the same image using a different property?

The first is a background image (a CSS property) on a box element. The second one is an image element (HTML). Please read further tutorials about HTML and CSS. — Seika85, May 19 '16 at 12:11

score 2 · Accepted Answer · edited May 23 '17 at 12:31

CSS is for background images, HTML for foreground images. If your HTML image is transparant, you can see the background through it.

Your CSS image has some features the HTML does not; it can be positioned, sized, you can play with the canvas etc.

Therefore, if you have an icon set, sometimes they use one image with all the icons on it and show only one of those icons, by changing the canvas size to the size of one icon and the position to the correct icon. That saves you from loading 100 icons.

HTML images are, rather then CSS images, able to be altered and played with by Javascript. You can edit them, even, if you like to.

You can read up more on this here: When to use IMG vs. CSS background-image?

I usually think about it like this:

Do I need to have elements on top of this image? - probably CSS Background image
Do you need to show only a part of the image sometimes? - probably CSS background
Do I need to have interaction with this image? - probably <image> tags.
Do users need to print the image if they print the page? - definitly <image> tags.

Additionally: HTML images render (if not set or affected otherwise) in their original dimensions, where you have to have some dimensions set on an element having a background image (the background-image itself does not affect the HTML element on which the background image was set). — Seika85, May 19 '16 at 12:17

score 0 · Answer 2 · answered May 19 '16 at 12:10

.jumbotron {
    background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');
}

and

<div class="jumbotron">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg">
</div>

are not the same thing.

The CSS method adds your image as a background to a .jumbotron element, whereas the HTML method adds a new image element (img) to your Document Object Model (DOM).

The HTML equivalent for your CSS code would be:

<div class="jumbotron" style="background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');"></div>

However, I would discourage writing CSS rules directly into the DOM.

score 0 · Answer 3 · answered May 19 '16 at 12:11

0

One is a CSS property called background-image.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

The other is a HTML element called img.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

answered May 19 '16 at 12:11

Paran0a

3,359
3
23
48

img src and img url usage in css and js

3 Answers3