ImageReplace

Replacing text with images can be a tedious process. You need to get the height and width of the image for every bit of text you want to replace. This extension takes care of that for you. This extension saves designers a lot of time.

Usage

In your CSS you have access to the image-replace property. Let’s say we have an image that is 300px by 300px that we want to use for a title:

h1
{
    image-replace:url(path/to/image.png);
}

This will find the image and create the properties for you:

h1
{
    background:url(path/to/image.png) 0 0 no-repeat;
    height:0;
    width:300px;
    padding-top:300px;
    overflow:hidden;
    text-indent:-9999px;
}

If the image is changed, Scaffold will recalculate the dimensions for you.

Settings

This extension has no settings.

Hooks

This extension has no hooks.