Why image is not displaying upon defining background: url() rule in CSS but is displaying when adding 'src' attribute to <img> 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.
4 answers
solution1
1 2014-10-27 16:34:10
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 -->
solution2
0 2014-10-27 16:38:21
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 -->
solution3
0
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..
solution4
0 2014-10-28 01:19:57
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.