I'm trying to CSS something like this, where #box and #rectangle are both linked images (buttons?) that are overlaid on a background image #phone aligned/attached to the bottom of the page:
<body>
<div id="phone" class="flexbox">
<a id="box" class="btn" href=""><img src="https://picsum.photos/135/135" /></a>
<a id="rectangle" class="btn" href=""><img src="https://picsum.photos/135/50" /></a>
</div>
</body>
body {
margin: 0; padding: 0;
background-position: center center;
background-repeat: no-repeat; background-attachment: fixed; background-size: cover;width:100%;
}
.phone{
display:flex;
justify-content:center;
align-items:flex-end;
height:100vh;
background-image: url("https://via.placeholder.com/750x1500");
background-size:80%;
background-repeat: no-repeat;
width:100%;
}
.btn{
display:flex;
justify-content:center;
flex-flow: column;
height:100vh;
}
from Recent Questions - Stack Overflow https://ift.tt/3buxKQI
https://ift.tt/3qRVkgX
No comments:
Post a Comment