How do I add a responsive background image in panel heading. Twiitter Bootstrap 3

Lbkv Published at Dev

Lbkv

Guys! I do really need to add some image as a bg to my panel heading. I also want h3 inside it. Here is my Code:

 <div class="row col-wrap">
            <div class="col-lg-4 col">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Simple</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item alert alert-success">Smth
                            <span class="glyphicon glyphicon-ok pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">smth1
                            <span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span></li>
                        </ul>
                    </div>
                    <div class="panel-footer clearfix">
                        <h5 class="col-lg-6 col-xs-6">19 999р.</h5>
                        <button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
                    </div>
                </div>
            </div>

Here is CSS:

.panel-heading{
background-image: url(../img/flowerbg.svg) no-repeat;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

}

Nothing happens. Bg is still filled with default bootstrap colour.

Joseph

Try Removing the no-repeat from background-image :)

The no-repeat belongs in its own property "background-repeat" unless you switch to the plain background statement then follow the other answer :)

For reference, you may want to peak at some documentation on short hand css declarations :) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

.panel-heading {
  background-image: url(https://c2.staticflickr.com/6/5551/15140731082_a2c3a4a2c4_n.jpg);
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-wrap">
  <div class="col-lg-4 col">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Simple</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item alert alert-success">Smth
            <span class="glyphicon glyphicon-ok pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">smth1
            <span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
        </ul>
      </div>
      <div class="panel-footer clearfix">
        <h5 class="col-lg-6 col-xs-6">19 999р.</h5>
        <button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
      </div>
    </div>
  </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.