CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
rublex
rublex

Reputation: 1923

background-image css does not show 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 the image in css.

This similar thread suggests using <div> and removing the quotes in url(), but this did not help.

Why does it not show?

Upvotes: 4

Views: 1496

Answers (2)

user4639281
user4639281

Reputation:

You need to set height to all of the 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 would like to responsively change the background image, you can do it like so.

(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");
  }
}

Upvotes: 2

Gabriel Moretti
Gabriel Moretti

Reputation: 676

You can't set the image src via css. You gotta turn the img into a block and set the proper width / height to show the background. However, it sounds little strange for me. You should do it on 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');
}

Upvotes: 0

Related Questions