how to make an image fit inside the board

Question

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 resize the window it is moving upwards. How to correct it?

How to make the image fit correctly inside the board without losing responsiveness without extract the board element from the main background and use it as an element alone?

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..

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>

What should fit in what? Your background image is being skewed depending on the aspect ratio of the viewport. Is that what you intend? — Terry, Jan 23 '19 at 12:38
are you also this user: https://stackoverflow.com/users/10323673/jupiter ? or is this question a homework somewhere? ... there is a bounty on this question — Temani Afif, Jan 23 '19 at 12:39

לבני מלכה · Answer 1 · 2019-01-23T12:47:23.730

1

Add position: relative; to #container and to .container2 (parent) if you set position:absolute to child

See fiddle

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;
position: relative;
}

.containerr {
  border: px solid #FF3399;
}

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

.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>

edited Jan 23 '19 at 12:47

answered Jan 23 '19 at 12:38

לבני מלכה

15,925
2
23
47

will change nothing, because we have a fixed position in an upper element and the container don't have any padding/margin... test you code and you will have the same output as his code – Temani Afif Jan 23 '19 at 12:42
pay attention to that edit, you simply erased position:fixed with relative and screwed the layout because you have the default body margin ... and still the relative position on the inner container is useless – Temani Afif Jan 23 '19 at 12:48
simply test your code with his code, changing position will not fix his issue ... you have the same output – Temani Afif Jan 23 '19 at 12:50
@לבנימלכה@temani-afif guys we are in a situation that we cant rework the structure of the code , becoz a lot of code working on top of it........is there any possible solution there i can achieve this without changing the main structure of the code... – wtp Jan 23 '19 at 12:55
@temani-afif guys we are in a situation that we cant rework the structure of the code , becoz a lot of code working on top of it........is there any possible solution there i can achieve this without changing the main structure of the code... – wtp Jan 23 '19 at 12:56

how to make an image fit inside the board

1 Answers1