Fit Div Size to Background Picture

Question

I'm trying to make my div size the size of my background image. When I set a background image it gets cut off (see image below). I've tried setting background-size to 100% width and height.

My Code Below

  .centerimage {
      display: block
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
    .Internet{
      background-image: url("content/happylaptoplady.png");
      margin-top: 100px;
      width: 250px;
      float: left;
      margin-right: 30px;
      margin-left: 130px;
      text-align: center;
    }
    .Phone{
      margin-top: 100px;
      float: left;
      width: 250px;
      margin-right: 30px;
      text-align: center;
    }
    .Television{
      margin-top: 100px;
      float: left;
      width: 250px;
      margin-right: 30px;
      text-align: center;
    }
    .Service {
      text-align: center;
      font-weight: 600;
    }
    .Dollar {
      font-size: 20px;
    }
    .Benefits {
      float: left;
    }

<img src="content/severroom.png" class="centerimage" />
    
    <div class="Internet">
      <h3>INTERNET</h3>
      <h7>CABLE, DSL & RURAL WIRELESS</h7>
      <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
      <ul class="Benefits">
        <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
        <li class="Benefits">NOW WITH LOWER PRICES</li>
        <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
      </ul>
    </div>
    <div class="Phone">
      <h3>PHONE</h3>
      <h7>RESIDENTIAL & COMMERCIAL</h7>
    </div>
    <div class="Television">
      <h3>TELEVISION</h3>
      <h7>SHAW DIRECT / INTERNET TV</h7>
    </div>

Possible duplicate of [How to get div height to auto-adjust to background size?](http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size) — Obsidian Age, Sep 22 '16 at 03:05

score 1 · Answer 1 · edited Sep 22 '16 at 06:01

You should create a wrapper to wrap all of your text and the wrapper should have background image. I modified your html/css. Please check it. https://jsfiddle.net/2n4fy3bc

.wrapper {
  background: url('http://i.imgur.com/HLSuhdi.png') no-repeat;
  width: 288px;
  height: 257px;
  border: 2px solid orange;
}
.Internet {
  text-align: center;
}
.Phone {
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Television {
  text-align: center;
}
.Television h3 {
  margin: 0;
}
.Service {
  text-align: center;
  font-weight: 600;
}
.Dollar {
  font-size: 20px;
}
.Benefits {
  list-style: none;
  margin: 4px 0;
}
.Benefits li {
  margin: 2px 0;
}
h3,
h4 {
  margin: 5px 0;
}

<div class="wrapper">
  <div class="Internet">
    <h3>INTERNET</h3>
    <h7>CABLE, DSL & RURAL WIRELESS</h7>
    <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
    <ul class="Benefits">
      <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
      <li class="Benefits">NOW WITH LOWER PRICES</li>
      <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
    </ul>
  </div>
  <div class="Phone">
    <h3>PHONE</h3>
    <h7>RESIDENTIAL & COMMERCIAL</h7>
  </div>
  <div class="Television">
    <h3>TELEVISION</h3>
    <h7>SHAW DIRECT / INTERNET TV</h7>
  </div>
</div>

Because of you used background image, image should be fixed width and height for the best display result (not scale up or stretch...). Therefore you have to know how's space the text take. If you use the div, it will automatically increase height based on your inside content.

score 1 · Accepted Answer · answered Sep 22 '16 at 03:50

Add the following css to the class

.Internet{
      background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg");
          background-repeat: no-repeat;
        background-size: 100% 100%;

      margin-top: 100px;
      width: 250px;
      float: left;
      margin-right: 30px;
      margin-left: 130px;
      text-align: center;
    }

.centerimage {
  display: block
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.Internet{
  background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg");
      background-repeat: no-repeat;
    background-size: 100% 100%;

  margin-top: 100px;
  width: 250px;
  float: left;
  margin-right: 30px;
  margin-left: 130px;
  text-align: center;
}
.Phone{
  margin-top: 100px;
  float: left;
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Television{
  margin-top: 100px;
  float: left;
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Service {
  text-align: center;
  font-weight: 600;
}
.Dollar {
  font-size: 20px;
}
.Benefits {
  float: left;
}

<img class="centerimage" />

<div class="Internet">
  <h3>INTERNET</h3>
  <h7>CABLE, DSL  RURAL WIRELESS</h7>
  <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
  <ul class="Benefits">
    <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
    <li class="Benefits">NOW WITH LOWER PRICES</li>
    <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
  </ul>
</div>
<div class="Phone">
  <h3>PHONE</h3>
  <h7>RESIDENTIAL COMMERCIAL</h7>
</div>
<div class="Television">
  <h3>TELEVISION</h3>
  <h7>SHAW DIRECT / INTERNET TV</h7>

Fit Div Size to Background Picture

2 Answers2