As a newcomer to front-end web development, I recently attempted creating a basic responsive page. While working on this project, I encountered an issue with the candle holder image. This image is size-responsive, meaning it adjusts in size as the browser window is resized. However, I noticed that the position of the image changes as well, causing the candle holder to shift relative to its original position on the full-screen layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
<style>
body{margin: 0px;}
#main{
background-color: hsl(308, 62%, 39%);
width: 100vw;
height: 100vh;
position: relative;
}
#blendaText{
color: white;
position: absolute;
font-size: 3.5vw;
top:50px;
left: 25px;
}
#form-container{
background-color: white;
height: 100vh;
width: 70vw;
float: right;
border-radius: 20px 0px 0px 20px;
}
#candleImage{
position: relative;
top:200px;
left: 200px;
width:30%;
height: auto;
}
#form{
margin-left: 100px;
margin-top: 100px;
}
input{width: 90%;}
input[type="submit"]{margin-left: 5px;}
</style>
</head>
<body>
<div id="main">
<p id="blendaText"> Blenda allows <br> you to imagine 3D </p>
<img id="candleImage" src="candle.png" alt="candle holder">
<div id="form-container">
<form id="form">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
https://i.sstatic.net/epaGQ.png https://i.sstatic.net/Yjnxt.jpg
After searching on Stackoverflow, I came across these 1 and 2 related questions. Unfortunately, the solutions provided did not resolve my issue. I also experimented with different positioning techniques such as absolute, relative, fixed, and sticky, but none of them proved successful. Here's the candle image for reference.