I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container.
The code I have written so far is displayed below:
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
For your convenience, here is the link to view the live demonstration on JSFiddle https://jsfiddle.net/n8ku715x/
Upon reviewing the JSFiddle demo, you will notice that it is not functioning as intended. The dimensions are incorrect and there may be other issues present. Any assistance provided would be greatly appreciated.