How to make background image fit correctly inside a board without losing responsiveness

user_10323673 0
Viewed 164

I have code in which there is class box, i have given backgroundimage to class box box1.

my problem is that the image is not correctly fitting inside to the board.

when i rezize the window it is moving upwards.

How to correct it.

How to make the image fit correctly inside the board without losing responsiveness?

which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..

when itry to resize the window the window the image is moving upwards..

html, body {
 background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 width:100%;
 height:100%;
 overflow: hidden;
 background-size: 100vw 100vh;
}

#box1 {
  position: absolute;
  top: 55.3vh;
  left: -19.98vw;
  cursor: pointer;
  border:px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box1 p {
  width: 10.0vw;
 height: 1.0vh;
  border-radius: 25%;
}


#container {
  white-space: nowrap;
  border:px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}


.hidden{
  visibility: hidden;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: blue;
  text-align: center;
}
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
      
        <div class="box box1" id="box1"  style="background-image:url(https://picsum.photos/200/300);">
          <p name="values" id="name1" class="hidden"></p>
        </div>

      </div>
    </div>
  </div>

css html
3 Answers

I think you are tackling this the wrong way. I would instead extract the board element from the main background and use it as an element alone:

html {
  background: #afffdc;
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.stack.imgur.com/CM15R.jpg) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}
<div id="container">
  <div class="box">
  </div>
</div>

Update

Here is a transparent version

html {
  background: linear-gradient(to right,pink, lightblue);
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.stack.imgur.com/ctB0T.png) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}
<div id="container">
  <div class="box">
  </div>
</div>

user_86203330

If you want your image to cover it's container you can use background-size: cover;,

If you want make sure the whole image is being displayed (but being resized if needed), you can use background-size: contain;

The above two requires explicit width & height in the class box1

user_80368140

I suggest you give your body a background-position according to your requirements. usually centering it is the best choice:

background-position: center center;

You can see how it works by looking at the snippet. resize the image by its bottom-right handle.

div{
 background-image: url('//unsplash.it/500');
 background-size:cover;
 background-position:center;
 resize:both;
 overflow:auto;
 width:100%;
 height:200px;
}
<div></div>

user_104070480
Related