I have code in which there is class box, i have given backgroundimage
to class box box1
.
my problem is that the im
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;
}
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;
}