http://placebox.es/150/150/d97f19/f1f1f1/

  • Width
  • Height
  • Background color
  • Text color
Cheat sheet

What is placebox.es?

Placebox.es is a free image placeholder service which both novice and experienced web designers can use in their template designs. Our service is 100% free and you can use it as much as you like and on any page or project you wish.

We have tried to make the use of our service, as easy and simple as possible, and in fact all you have to do to generate a placeholder on the fly, is simply adding the width dimension to the url in your address bar: http://placebox.es/150/.

The above example produce a square 150px image placeholder, with background color randomly changing at load time.
Should you need more advanced stuff such as custom Background color on the image placehold or possibly a different Text color and maybe a custom text to top it all off, then this is also possible. See the advanced examples below.

Statistics?

Total image placeholders generated: 10010790 [Today: 54793 ]

jQuery function for placebox.es?

You can automate the generation of the image placeholders, in such a way that the only thing you as a designer needs to do is to make sure the dimensions of an IMG tag is set either directly on the element or in the CSS file.

To make this magic happen, you only need to download the .js file and link it in the head section of your html page, and then call the code block listed below. Doing so will make the placeholder magic happen.

Download script
Click here to download placeboxes.js file
Click here to download full code example including HTML page

Code to call the function
$(document).ready(function () {
   $('body').placeboxes();
});

Examples

a square image placeholder at 150px size?

Specify the dimension of the image placeholder as the first parameter to create a square with the same width and height.
Background color of the image will random at each load.

code:

http://placebox.es/150/
Display a square image placeholder with random background color

a image placeholder at 150x100 size?

Specify the dimensions to create a image with different sized width and height.
Background color of the placeholder will random at each load.

code:

http://placebox.es/150/100/
http://placebox.es/150x100/
Display a image placeholder with custom size and random background color

a placeholder image at 150x150 size and a yellow background?

Specify the dimensions to create a placeholder with different sized width and height.
Specifying a background color will force the image to display in the same color each load.

code:

http://placebox.es/150/150/DDE15C/
http://placebox.es/150x150/DDE15C/
Display a image placeholder with custom size and static background color

RGB instead of Hex color codes for the background?

It's also possible to use a RGB color for background in the placeholder box instead of the default HEX values.
There is currently no gradient functionality when using RGB color for background of the image placeholder.

Colors are specified as R,G,B in the URL

code:

http://placebox.es/150/150/rgb250,45,45/
http://placebox.es/150x150/rgb250,45,45/
Display a image placeholder with custom size and static background color

a placeholder image at 150x150 size and a yellow background and black text?

Specify the dimensions to create an image placeholder with different sized width and height.
Specifying a background color will force the placeholder to display in the same color each load.
Specifying a second color will make the text color change.

code:

http://placebox.es/150/150/DDE15C/000000/
http://placebox.es/150x150/DDE15C/000000/
Display a image placeholder with custom size, custom background color and custom text color

a image placeholder at 150x150 size, purple background, white and custom text?

Specify the dimensions to create an image placeholder with different sized width and height.
Specifying a background color will force the image placeholder to display in the same color each load.
Specifying a second color will make the text color change.
Specifying a text will override the default text of the placeholder, and show the selected instead.

code:

http://placebox.es/150/150/AE5CE1/ffffff/Custom text/
http://placebox.es/150x150/AE5CE1/ffffff/Custom text/
Display a image placeholder with custom size, custom background color, custom text color and a custom text

2 images on the same page, and would like them to randomly change color?

If you have 2 or more placeholder boxes on a single page generated by placebox.es, they will render at the same color due to the cache in your browser. To get around this, you need to add a querystring parameter to the url, so that the boxes does not use the exact same address.

code:

http://placebox.es/150/50/
http://placebox.es/150/150/

http://placebox.es/150/150/?t=2
http://placebox.es/150/150/?t=3
Display a image placeholder with custom size and random background color
Display a image placeholder with custom size and random background color

Display a image placeholder with custom size and random background color
Display a image placeholder with custom size and random background color

Text to small? define a custom text size

If you create a large placeholder you might wish to change the text size to better reflect the enlarged placeholder.
To do this all you have to do is add the size after the custom text.

code:

http://placebox.es/150/150/4f75e4/ffffff/Custom text,25/
http://placebox.es/150x150/4f75e4/ffffff/Custom text,25/

This is an advanced feature, and the url format needs to follow these rules to render correctly
Display a image placeholder with custom size, custom background color, custom text color, custom text and text size

Larger text, Check! Now what about a custom text style?

Custom text styles is also possible, it requires you to add another parameter after the text size.
The following parameters can be used:
(b)old, (i)talic, (s)trikethrough, (u)nderline.

Make a text Bold and italic you would add the following as the 2nd parameter: ,bi
Make a text Bold,italic,strikethrough and underline you would add the following as the 2nd parameter: ,bisu

code:

http://placebox.es/150/150/4f75e4/ffffff/Custom text,25,bisu/
http://placebox.es/150x150/4f75e4/ffffff/Custom text,25,bisu/

This is an advanced feature, and the url format needs to follow these rules to render correctly
Display a image placeholder with custom size, custom background color, custom text color, custom text and custom size + styles

What about gradient backgrounds? Sure thing

It's possible to use a gradient background, if you do not like the one colored ones.
To get a nice gradient placeholder with 2 colors you would need to add an extra HEX color after the background

code:

http://placebox.es/150/150/4f75e4,fff/ffffff/Custom text/
http://placebox.es/150x150/4f75e4,fff/ffffff/Custom text/

This is an advanced feature, and the url format needs to follow these rules to render correctly
Display a image placeholder with custom size, custom background color, custom text color, custom text and custom size + styles