calmity calmity - 7 days ago 8
CSS Question

Background SVG won’t scale in Bootstrap div column

I’d like be able to stretch a large SVG over a

<div>
that is embedded in Bootstrap’s
<div class="col-xs-N">
.

The code is this:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.my-img {
background-size: cover;
padding-bottom: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
}
</style>
</head>
<body>
<div class="container">
<div class="col-xs-offset-5 col-xs-2">
<div class="my-img"> </div>
</div>
<div class="col-xs-5">
</div>
</div>
</body>
</html>


Any ideas greatly appreciated.

Answer

You need to put your background-size: cover; after background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;. In your case background-size is invoked before loading the image, so it didn't take effect.

Change:

.my-img {
  background-size: cover;
  padding-bottom: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
  }

to:

.my-img {
      padding-bottom: 100%;
      background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
      background-size: cover;
      }

Example jsFiddle