Currently, I am attempting to create a puzzle using a background image with numbered pieces that will eventually be movable through javascript. However, my progress has hit a snag as I am struggling to position the pieces correctly on the image. The HTML contains a div with an ID named puzzlearea, and I have used JavaScript to append children elements to it successfully. Despite this, the CSS is not cooperating in positioning the pieces relative to the background. As it stands, my test pieces are stubbornly stuck in the top left corner and seem to be ignoring the values set for background-position. Below is the snippet of the CSS code:
body {
text-align: center;
font-family: cursive;
font-size: 14pt;
}
#puzzlearea {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-image: url("planck-image.png");
}
.tile {
font-size: 40pt;
color: red;
line-height: 70pt;
width: 90px;
height: 90px;
border: 5px solid black;
background-position: -200px -200px;
position: fixed;
}
Update: Screenshot.
I am seeking suggestions or solutions as to why the positioning issue may be occurring. Any insights would be greatly appreciated.