I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way.
My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utilized the "position:inherit" property for the smaller images within a container div holding the main image. The result was successful as the smaller images aligned perfectly with the background.
However, the drawback is that the larger image must be styled as "position:absolute" for this setup to work. Unfortunately, this restriction means that I am unable to move the entire arrangement to any other location on the page except for where it is currently placed at the top-left corner.
Here is a snippet of the HTML file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Map">
<img id="X0001Y0001" src="blue_brick.png">
</div>
</body>
</html>
And here is a portion of the CSS file:
#Map {
background-image:url('CoreMini.png');
height:128px;
width:256px;
position:absolute;
}
#X0001Y0001{position:inherit;top:0px; left:9px}