I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting the sizing and proportions of all the images just right. I envision a background image that spans the entire page, with carefully positioned images and text layered on top. However, when I resize the JSFiddle window, everything appears out of proportion.
For a clearer example of what I'm aiming for: You'll notice the text over the "chalkboard" image. I want it to give the impression that the text is actually being written on the chalkboard, so it should stay fixed on the blackboard without shifting when the window is resized or viewed at different aspect ratios. I plan to do this with numerous images, so a detailed explanation would be greatly appreciated.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1630699376059-b781970715b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-repeat: no-repeat;
background-size: 100%;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>// Side Note: These aren't the images I'm trying to use, just stock photo examples.
Appreciate your help!