Lawrence Lelo Lawrence Lelo - 4 months ago 7
HTML Question

Displaying a number at bottom-right with a background image

I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.

The code I have so far is as follows

<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>


And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/

As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.

Answer

<style>
  body {
  }
  
  #ctn {
    height: 26px;
    background-color: red;
    width: 26px;
    position:relative
  }
  #bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 8px;
    color: #fff
  }
  

</style>

<body>
  <p id="ctn"><span id="bottom">2</span></p>
</body>

Here's your container, with the number within it - is that what you were looking for?