CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Fit Div Size to Background Picture

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.

enter image description here

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>

Upvotes: 0

Views: 106

Answers (2)

Hieu Tran
Hieu Tran

Reputation: 364

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.

Upvotes: 1

Gowtham
Gowtham

Reputation: 1597

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>

Upvotes: 1

Related Questions