How to put text on placeholder image


Tags: html,css

Problem :

I am using placehold.it to produce a square (When on the site I need it for the colors). See:

http://jsfiddle.net/3s3Zb/2/

I would also like to have some text on each box. When I use the provided text input it becomes small and unreadable. So I attempted to put my own text on this image.

I tried following: How to position text over an image in css

Its CSS:

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

But If I put the checkbox in the container it stops working properly (it turns back into a normal checkbox).

If you could show me how to put text on each square/or what I am missing it would be great.



Solution :

You would just need to position the text absolutely. try this;

HTML

<td>
  <label class="fb" for="11">
    <div>Some text here</div>
    <input id="11" type="checkbox" name="fb" value="11" />
    <img src="http://placehold.it/150/0.8&text=asdasdasddasdaasd">
  </label>
</td>

CSS

.fb {
     position:relative;   
}
.fb div {
    position:absolute;
}

the fiddle


    CSS Howto..

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    simple text input box “autosuggest” script - how to overlap with css

    How to move this button?

    How to get a background image to print using css?

    How change color of text and image before print with css? [closed]

    How to keep the top div height fixed and bottom div height in %age

    Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    How to make a text flash in html/javascript?

    How to prioritize a CSS class?

    How to have background color outside of radius border in a tbody in chrome?

    how to show element if visible in view-port with jQuery? (UPDATE)

    How to use ViewContext?

    How do you make a floated element fill the remaining horizontal space when it is between its fixed width siblings?

    How to change the Attribute background color in css code

    How to add only those script and css files necessary to views with partial views [closed]

    How can I display links in 2 rows?

    How can I get width and height of big image after displaying it on html-page?

    How to create a template that will show only in IE6 using javascript?

    How to move a table(or other content) next to vertical navigation bar

    CSS: how to position buttons in groups across a row on a web page

    How to show span class inside the textbox?

    How to have elements copy other element's auto height css?

    How do I get the boxes to align underneath each other when the screen shrinks (responsive)

    AngularJS: How to unselect a span when selecting another

    How to remove space above and below the in-line block elements?

    How to make section be tall enough to store data (fullpage.js)?

    How to get website to show better in iPhone and iPad? (width too little)

    Show all text document

    How to use 3 background images for a resizable layout in CSS?