To ensure proper positioning, it is recommended to set the distance from the bottom instead of the top or use percentages for more flexibility.
UPDATE: An experiment has been transformed into a practical example:
The description's placement is determined in relation to the image container's bottom and left (with the image fully filling its container).
In the first scenario, fixed pixel distances are used for the left and bottom of the image container.
In the second case, these distances are specified as percentages, adjusting accordingly when resizing the browser window.
The key CSS rules employed are
figcaption {
bottom: 5px;
left: 23px;
/* additional rules here */
}
for fixed distances in pixels, and
figcaption.perc {
left: 10%;
bottom: 17%;
}
for percentage-based distances.
It should be noted that position: absolute and setting the top and left properties for the image are unnecessary.
However, position:relative must be applied to the parent element of the description box.
To achieve full horizontal screen coverage by the image, you need to apply margin:0; and padding:0; on the body element, and width: 100%; along with margin: 0; on the figure element. The example has been adjusted to reflect these modifications
If aiming for complete horizontal and vertical screen coverage by the image, consider using the image as a background for the body element without an img tag, while setting the heights of both the html and body elements to 100% - see example
Cautions to bear in mind include potential distortion of the image upon resizing the browser window and the need for content below the image requiring the outer element to have position: absolute and top: 100% set. Both aspects can be observed in the linked example. Content beneath the image can be removed if not needed.