Geek Answers Handbook

Background-image css not showing in img tag

The responsive image in my bootstrap html does not show:

<div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <img class="myimg img-responsive"/> </div> </div> </div>

CSS

 .myimg { background-image: url("http://images.wikia.com/worldlanguages/images/6/63/Wikipedia-logo.png"); display:block; height:100%; width:100%; }

jsfiddle demo

<img src="..."> will work, but I need to define an image in css.

This similar thread suggests using a <div> and removing quotes in url() , but that didn't help.

Why is it not displayed?

+5
source share
2 answers

You need to set the height for all parents and you need background-size: cover

( Demo )

 html, body { height: 100%; } .container { height: 100%; } .row, .col-sm-12 { height: 100%; } .myimg { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; } .myimg2 { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; } .myimg3 { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; }

If you want to quickly change the background image, you can do it like this.

( Demo )

 html, body { height: 100%; } .container { height: 100%; } .row, .col-sm-12 { height: 100%; } .myimg, .myimg2, .myimg3 { background-size: cover; display: block; height:100%; width:100%; } @media (max-width: 500px) { .myimg { background-image: url("//lorempixel.com/500/500/cats"); } .myimg2 { background-image: url("//lorempixel.com/500/500/business"); } .myimg3 { background-image: url("//lorempixel.com/500/500/transportation"); } } @media (max-width: 750px) { .myimg, .myimg2, .myimg3 { .myimg { background-image: url("//lorempixel.com/750/750/cats"); } .myimg2 { background-image: url("//lorempixel.com/750/750/business"); } .myimg3 { background-image: url("//lorempixel.com/750/750/transportation"); } } } @media (max-width: 1000px) { .myimg { background-image: url("//lorempixel.com/1000/1000/cats"); } .myimg2 { background-image: url("//lorempixel.com/1000/1000/business"); } .myimg3 { background-image: url("//lorempixel.com/1000/1000/transportation"); } }
+2
source

You cannot set src image via css. You have to turn img into a block and set the correct width / height to show the background. However, that sounds a little strange to me. You should do this in a div:

 <div class="myimg"> </div> .myimg { width: 100px; // change to your background width height: 100px // change to your background height background: url('path/to/img'); }
0
source

More articles:


All Articles