How do I get a contained background image to cover the entire div?

Question

Ok, so my question is how do I make my image more responsive? I am a new coder, so I'm still trying to understand css more. I've tried using the contain value, but it doesn't cover the entire div. I also tried cover, but it doesn't show the entire image when it expands inside the div. If anybody has any ideas at all, I would love to hear from you. Thanks Also, it's not the same question as covering the entire page. I want the image to cover inside my div, and it doesn't seem to be working.

.tribute {
  margin-top: 40px;
  margin-left: 12%;
  height: 250px;
  width: 35%;
  background: url(dickgregory.jpg);
  background-size: cover;
  float: left;
}

<div id="projects">
    <br>
    <br>
    <h1 class="centerh1">Projects</h1>
    <hr class="portfoliohr">
    <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
        <div class="tribute">
        </div>
    </a>
</div>

Try this link and see if you can find your answer :) https://www.w3schools.com/cssref/css3_pr_background-size.asp — Sirmyself, Dec 19 '17 at 22:50

Obsidian Age · Answer 1 · 2017-12-19T22:57:43.303

Your image is taking up the full width and height of your .tribute element. The problem is that you've both added margin to the .tribute element, and restricted its width.

Removing the margins and setting width to 100% shows the image covering the full area as expected.

Note that background-size: cover may stretch or crop the image, and background-size: contain will resize the image to ensure that it is always visible.

This is best demonstrated with an example.

Contain:

.tribute {
  height: 250px;
  width: 100%;
  background: url(http://placekitten.com/310);
  background-size: contain;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
    <div class="tribute">
    </div>
  </a>
</div>

Cover:

.tribute {
  height: 250px;
  width: 100%;
  background: url(http://placekitten.com/310);
  background-size: cover;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
    <div class="tribute">
    </div>
  </a>
</div>

Hope this helps! :)

score 0 · Answer 2 · answered Dec 19 '17 at 23:00

Unfortunately cover and contain are the best ways to handle an image that isn't the proportion you want. You could use an <img> tag instead of a div with a background image, if that would work for your use. Otherwise, I usually add a background color to the element that is similar to the image, so that it blends in better.

.tribute {
  margin-top: 40px;
  margin-left: 12%;
  height: 250px;
  width: 35%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #666;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
   <div class="tribute">
   </div>
  </a>
</div>

How do I get a contained background image to cover the entire div?

2 Answers2