I want to have one image on top of another. I managed to do it using DIVs and Margins but when the page size changes, the guy with the lawnmower moves. How do I prevent that from happening?
Here is my code:
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div id="bckgrnd"><img class="img-fluid" src="assets/img/GTLogo_backgorund.jpg">
<div id="guy"><img class="img-fluid" data-aos="slide-right" data-aos-duration="900" src="assets/img/GT_Guy.png" width="35%" height="30%" style="margin: 0px;margin-top: -695px;margin-left: 33px;"></div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/bs-init.js"></script>
</body>
Image