Make background image the size of screen

前端未结

关注

 1  599

I want the background image to fill the screen and am not worried about losing aspect ratio. Have trued everything, don\'t think I\'m missing anything obvious...

The HT

相关标签:

1条回答

青春惊慌失措

2021-01-29 10:25

add background-size: cover to the rule for body

Or if you want to make sure the whole background-image is shown and really don't care about a distorted image, you can use background-size: 100% 100%;

Here's a snippet with your code. If you change back the background-size of body to auto (as you had it) , you see the original size of the placeholder image

.phone {
  margin: auto;
  height: 737px;
  width: 654px;
  background-image: url("/imgs/phone.png");
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
}

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 536px;
  width: 350px;
  border: 1px solid;
  border-radius: 5px;
  display: block;
}

iframe {
  width: 350px;
  /* adjust to your needs */
  max-width: 100%;
  /* to make it responsive */
}

body {
  background-image: url("http://placehold.it/200x150/fa0?text=this is an image");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

The CSS:

<body>
  <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;">
    <div className="container">
      <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe>
    </div>
  </div>
</body>

0 讨论(0)