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

Question

Hi

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

Answer 1

You should be able to this using a coloured div and text (the number) within the div. You might need to adjust the CSS a bit to make a perfect square though.

<div style="border: 1px solid black; background-color: red; color: white; font-size: 18px; padding: 15px;">
    <%: Model.RandomNumber %>
</div>

Answer 2

using CSS background and putting an image behind the number?

Answer 3

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:

HTML

<div class="square">
    123
</div>

CSS

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

HTML

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

CSS

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