3

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>
Jupiter
  • 395
  • 3
  • 15
  • 1
    try setting your background size to one of either `cover` or `contain` and see which you prefer – Jhecht Jan 17 '19 at 05:19
  • @jhecht i have set the #box1:background-size: `contain`; but not working – Jupiter Jan 17 '19 at 05:22
  • @jhecht #box1:background-size:` cover`; worked but` image is moving upwards` when i `rezise the window` how to `correct it`? – Jupiter Jan 17 '19 at 05:31
  • 1
    i will suggest instead of using background image try to create that board in css. thanks.. this might cause other element to behave weirdly thanks. – Xenio Gracias Jan 17 '19 at 05:33
  • @xenio-gracias its a good method thanks for that....now in my snippet, thw `image is moving upwards` when i `rezise the window.`.is there a way to correct it? thanks in advance – Jupiter Jan 17 '19 at 05:40
  • 1
    This is not the correct way to do it.. you should use another approach to make this work. thanks – Xenio Gracias Jan 17 '19 at 05:54

3 Answers3

3

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • you used background: #afffdc; for html but this is cant be applied for my task, actually if i use a custom made backgound with buildings and i want to place an image inside that board.. what would i do? then this method cant be applied know? – Jupiter Jan 22 '19 at 11:45
  • 1
    @Jupiter it can apply, simply change the background with what you want and make the broad I have used to have a transparent color instead of #afffdc – Temani Afif Jan 22 '19 at 11:47
  • 1
    @Jupiter I have updated with a transparent version. I used a gradient that you can easily replace with any image – Temani Afif Jan 22 '19 at 11:52
  • 1
    @Jupiter yes, I used Gimp to remove the background and then save it as PNG that support transparency – Temani Afif Jan 22 '19 at 12:57
  • 50% 5%/86% 27% this denotes? – Jupiter Jan 24 '19 at 10:31
  • 1
    @Jupiter `50% 5%` is the background-position (left top) and `86% 27%` is the background-size (width height) – Temani Afif Jan 24 '19 at 10:34
  • 1
    @Jupiter if you want to understand how the percentage are calculated you can read this : https://stackoverflow.com/a/51734530/8620333 – Temani Afif Jan 24 '19 at 10:37
1

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

Andus
  • 1,713
  • 13
  • 30
  • 1
    I see that your board is part of the background of your body class, when you resize the window, the background image will become smaller but the size of the image on your board will not change. I will suggest you take to take the board out as a separated image. – Andus Jan 17 '19 at 05:52
1

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>
Ali Mousavi
  • 154
  • 10