Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

CSS – Replacing Text with an Image


Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, “display:none” will cause that element and every child in it to disappear. There is nothing you can do to make one of the child’s element.
“background-image” give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:

<h3 id=”title”>
<span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:

/* Remove the Text */
#title span {
display:none;
}

h3#title {
background: url(“image/url.jpg”) no-repeat top left;
height: 20px;
width: 100px;
}

And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I’ve seen that CSS Text Replacement technique described with two pages, so I thought I’d see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I’ve also seen this done with: “text-indent: -5000px;” or “visibility:hidden”. These work, but I would stick with display:none. It’s the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

Tags: , , , , ,

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment