CODEWITHSUNDEEP
htmlcssmedia-queriesbackground-image
jseymour186
jseymour186

Reputation: 27

How do I get the background-image to fill the div when media query is met?

I have divs in a flexbox and I want them to go to full width when the screen reaches 992px. When it goes to 992px the .tileImage spans are still set at 300px x 215px. But if I set .tileImage to change to a width and height of 100% the image disapears all together.

Here is a fiddle showing my troubles.

https://jsfiddle.net/jseymour186/fs0z2qLu/27/

.flexBoxContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.flexBoxItem {
  margin: 5px;
  background-color: #CBB677;
}

.joshButtons {
  background-color: #CCB677;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

#articleBody .joshButtons {
  color: white;
  text-decoration: none;
}

.tileImage {
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-position: center;
  width: 300px;
  height: 215px;
  display: block;
  -webkit-transition: background-size .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-size .5s;
}

.flexBoxItem:hover .tileImage {
  background-size: 110%, 110%;
}

#districtBudget {
  background-image: url(http://www.baschools.org//vimages/shared/vnews/stories/59bab952b682e/District%20Budget.jpg);
}

#bondFunds {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/Bond%20Funds.jpg);
}

#perPupilFunding {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Per%20Pupil%20Funding.jpg);
}

#teacherPay {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Teacher%20Pay.jpg)
}

#fundingTimeline {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/BudgetTimeline3.jpg)
}

@media screen and (max-width: 992px) {
  .flexBoxItem {
    width: 100%;
    padding-top: 66.66%;
  }
}

<div class="flexBoxContainer">

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="District Budget" class="tileImage" id="districtBudget"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Bond Funds" class="tileImage" id="bondFunds"></span>
      </a>
  </div>

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Per Pupil Funding" class="tileImage" id="perPupilFunding"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Teacher Pay" class="tileImage" id="teacherPay"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Funding Timeline" class="tileImage" id="fundingTimeline"></span>
      </a>
  </div>
</div>

Upvotes: 0

Views: 138

Answers (1)

Temani Afif
Temani Afif

Reputation: 273261

You should move the padding-top with percentage to the image container instead:

.flexBoxContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.flexBoxItem {
  margin: 5px;
  background-color: #CBB677;
}

.joshButtons {
  background-color: #CCB677;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

#articleBody .joshButtons {
  color: white;
  text-decoration: none;
}

.tileImage {
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-position: center;
  width: 300px;
  height: 215px;
  display: block;
  -webkit-transition: background-size .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-size .5s;
}

.flexBoxItem:hover .tileImage {
  background-size: 110%, 110%;
}

#districtBudget {
  background-image: url(http://www.baschools.org//vimages/shared/vnews/stories/59bab952b682e/District%20Budget.jpg);
}

#bondFunds {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/Bond%20Funds.jpg);
}

#perPupilFunding {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Per%20Pupil%20Funding.jpg);
}

#teacherPay {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Teacher%20Pay.jpg)
}

#fundingTimeline {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/BudgetTimeline3.jpg)
}

@media screen and (max-width: 992px) {
  .flexBoxItem {
    width: 100%;
  }
  .flexBoxItem .tileImage {
    width: 100%;
    padding-top: 66.66%;
    height: auto;
  }
}
<div class="flexBoxContainer">

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="District Budget" class="tileImage" id="districtBudget"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Bond Funds" class="tileImage" id="bondFunds"></span>
    </a>
  </div>

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Per Pupil Funding" class="tileImage" id="perPupilFunding"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Teacher Pay" class="tileImage" id="teacherPay"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Funding Timeline" class="tileImage" id="fundingTimeline"></span>
    </a>
  </div>
</div>

Upvotes: 1

Related Questions