How to display a number (generated dynamically) into a square using CSS


Problem :

I'm new to CSS. I need to display a number (generated dynamically through ASP.NET MVC action method) on to a Square (normal image , whose face needs to be replaced with the dynamic number ).

Can someone assist me in doing this . I am sure it will just take a minute for some one who knows CSS.

Thanks, Vijay

Solution :

The easiest way would be to create a <div> that uses your image as a background-image property. Then it would just be a matter of writing the number into that div:


<div class="square">


.square {
    /* following are width and height of your background image */
    width: 100px;
    height: 100px;
    background: url(yourimg.png) no-repeat 0 0;

If you have to use an <img> tag, it's a little trickier, but still possible:


<div class="square">
    <img src="yourimg.png" /> 


.square {
    /* following are width and height of your background image */
    width: 100px;
    height: 100px;

    position: relative;

.square img {
    position: relative;
    z-index: 1;

.square span {
    position: absolute;
    z-index: 2;

    /* Use to position your number */
    top: 10px;
    left: 10px;

The above works by creating a stack of elements, with the <img> on the bottom (on account of lower z-index) and the number positioned absolutely above it. This works because the number's parent (<div class="square">) has position relative so it becomes the coordinate system.

    CSS Howto..

    How to center navigation that has icons so text is aligned to icons?

    How can I get the first and last name labels to align under the corresponding input forms?

    how to load different css files with different screen sizes?

    How to set DIV's width based on CSS indexes

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    How to offset div columns in CSS grid system

    how to remove white space in justified css

    How to cover box shadow?

    How do I change the arrow in the select with Chosen plugin?

    How to dynamically change CSS elements to be HTTPS or HTTP

    In IE6, how to float item to right without clearing it?

    How to read DOM in React

    How can I reduce the space between two elements in CSS?

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    how to change the colour property of tag used for a text

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to prevent a div from disappearing when you hover a link in pure css

    How do I change the alignment of my search box?

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to align two svg masked images on the same line

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

    Show range slider above Bootstrap progress bar (in navbar)

    How to let an object not take up its natural width

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How to float 3 divs with margin left & right 0px?

    I am having a hard time figuring out how to dynamically setup a timeline

    How to prevent dynamically appended div from overflowing?

    How to borrow styles from another CSS rule

    HTML, CSS - image inside image, how to do that?