Why image is not displaying upon defining background: url() rule in CSS but is displaying when adding 'src' attribute to tag?

Question

I would like to know why images are not displaying after adding

      .image_container img {
        background: url(http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg);
        width: 900px;
        height: 500px;
        cursor: pointer;
    }

in inline CSS. This little set of rules is supposed to style

                    <div class="image_container">
                        <img>
                    </div> <!-- end image_container -->

The image is not showing up but when I delete the

background: url()

and add

src=""

to an

<img>

tag then the image is displaying properly.

Can someone explain to me this phenomenon ? I thought that it looks pretty logic, I set up an element inside a div - and set up definitions of this element in section that is more appropriate for it - inline CSS.

I've double checked if CSS is placed properly inside

<head>

tags as well as double checked the directory where image is being placed.

An image is an image, not a block-level element that you can assign a `background: url()` to. — rnevius, Oct 27 '14 at 16:31
So when defining 'background: url()' would work ? What tag I would need to use ? — Danny_Student, Oct 27 '14 at 16:33
What are you trying to have an element designed to display a foreground image without putting a foreground image in it in the first place? — Quentin, Oct 27 '14 at 16:33
setting a bg-image on img tag is redundant why don't set it on image_container — DaniP, Oct 27 '14 at 16:33
It sounds like you should just be using `src` for this and not using CSS. The context looks like you are trying to display a foreground / content image, not a background, so using CSS to specify a background image is inappropriate. — Quentin, Oct 27 '14 at 16:34
The `src` attribute is not optional for ``. IIRC, Internet Explorer will show the lovely broken image icon on lacking `src`. You should at least give a transparent 1x1 image in a `data` URI or something like that. — Ulrich Schwarz, Oct 27 '14 at 16:44

Wavemaster · Answer 1 · 2014-10-27T17:15:16.660

1

You can not add an background to an img tag.

(in fact you can but the background-image will show up behind your image in the src-Tag. You can use this for special effects if you have a semi transparent image)

Solution

Try to add the background to your div instead: http://jsfiddle.net/aoy95s75/

HTML:

<div class="image_container">
    <img src="">
</div> <!-- end image_container -->

CSS:

.image_container {
    background-image: url(http://www.imag.de/images/10_welt_startseite.png);
    width: 900px;
    height: 500px;
    cursor: pointer;
    display: block;
}

In this case you can drop your <img>-Tag and just write

<div class="image_container"></div> <!-- end image_container -->

edited Oct 27 '14 at 17:15

answered Oct 27 '14 at 16:34

Wavemaster

1,794
16
27

I'm guessing the downvote was because you have the img tag there without a src attribute. That's not valid. Maybe the downvoter expects you to not propagate the use of invalid html and explain the use of background images versus img tags. In all fairness, it would be more helpful to the OP and others in the future. – jme11 Oct 27 '14 at 16:44
@Wavemaster you need to edit your last `
`. `
` can't self close, you need a closing `
`. http://www.w3.org/TR/html5/syntax.html#void-elements and http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5
– disinfor Oct 27 '14 at 17:06
Thanks for answers. However, can you explain to me exactly why a single tag cannot have 'background url' specified ? Everyone tell that it cannot have it but nobody exactly explains why. So where the 'background url' is being used for ? For what tags ? Thanks – Danny_Student Oct 27 '14 at 17:52
As I mentioned it _can_ have a background with css but the background would be _behind_ the actual image. The difference between an image as tag `` and an `background-image` with css is the usage: css is used for styling purposes (eg images for buttons). The `` tag is used if you want to show an actual image on your page (eg your face on an about page). You are allowd to use the `background-image` property on every html tag: [http://www.w3.org/TR/CSS2/colors.html#background-properties](http://www.w3.org/TR/CSS2/colors.html#background-properties) – Wavemaster Oct 27 '14 at 18:06

score 0 · Answer 2 · answered Oct 27 '14 at 16:38

0

Use another div instead of img tag and change your css accordingly (.img-container .img) :

<div class="image_container">
  <div class="img"></div>
</div> <!-- end image_container -->

answered Oct 27 '14 at 16:38

Prabu Raja

239
1
8

score 0 · Answer 3 · answered Oct 27 '14 at 19:19

I think you miss coma ,

replace your css with this

.image_container img {
        background: url('http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg');
        width: 900px;
        height: 500px;
        cursor: pointer;
    }

for reference checkout this Link

hope this help..

score 0 · Answer 4 · answered Oct 28 '14 at 01:19

For all poor souls still trying to understand this phenomenon - type :

display : block;

and magically the image appears :) However, please follow a simple rule that I've learnt upon researching internet - HTML is for content, CSS is for styling it. Never the other way.

Why image is not displaying upon defining background: url() rule in CSS but is displaying when adding 'src' attribute to tag?

4 Answers4

Solution