CODEWITHSUNDEEP
htmlcss
turd.ferguson
turd.ferguson

Reputation: 51

Responsive background image with responsive height and width

I'm trying to get these divs to be at max 500px by 500px. Even setting the max-width and max-height properties, it still takes up the whole page plus some height wise. I want the background images to be responsive and maintain their aspect ratio. I read that if you divide the height by the width then multiply to 100, you get the percentage to use as the padding-top property. In my case 500 / 500 is 1 and multiplied by 100 is well, 100%. Any help or advice would be much appreciated.

HTML:

<html>
    <body>
        <div></div>
        <div></div>
    </body>
</html>

CSS:

body {
  width: 80%;
  height: 100%;
}

div {
  width: 40%;
  max-width: 500px;
  padding-top: 100%;

  background-image: url(http://placehold.it/500x500);
  background-repeat: no-repeat;
  background-position: center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  margin: 2.5%;

  float: left;
}

Upvotes: 0

Views: 2221

Answers (1)

Lansana Camara
Lansana Camara

Reputation: 9873

You have max-width: 500px, and then you overwrite it with the background-size: cover. If you want to use the background-size: cover, you should put a second div within that div and use that background-size: cover style on that nested div so it covers the parent div, which has a max width of 500px.

For example:

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {max-width: 500px}
.child {background-size: cover; //include image}

Did not test the code, but you get the gist of it.

Upvotes: 1

Related Questions