Mobile Friendly Website


Doing it with style

image replacement COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Jo-an, this one is aimed at the images-off/css-on combination which will still show the text. Any method that moves the text off screen with css will not show the text or image with this combination. Your method will also duplicate the information in text browsers and non css browsers. But thanks for the comment.
(10.09.2005, 11:59)

If you would use an extra p or a (depends you want the text is a link or not) and use text-indent: -9999px
for <a> (maybe throw an extra overflow:hidden ??)
margin-left: -9999px
width: ??px (maybe one can do it)
for <p>
This way you can still have transparent images as backgrounds and use some text for (text-based) browsers or older browsers (but than you could use the extra img. Did some tests to see if margin-left: -9999px does any harm but cannot see any problem since it is only text that is hidden from view. In IE3 eg it displays the <img> with underneath the <p>

But can I use <p>s in <h1>s ??? They are both block-level elements not so??
(10.09.2005, 12:24)

If you would break up the text for the alt of the iamge and use the p to display some extra text. ??
(10.09.2005, 12:25)

To clarify the extra <img>, you hide the <img> for CSS capable browsers and set the same image as a background for a <span> or <em> that way you can target both ... (sorry for the repeated comments - but when you have an idea ...
(10.09.2005, 12:29)

The general idea (maybe h1 is even better)

<div id="header">

<img src="/images/mylogo.gif" width="146" height="54" alt="my webdesign company -">

<p>The webdesigners that probe CSS.</p>


#header {
height: 102px;
background: #fff url(../images/mylogo.gif) no-repeat top right;
padding: 0;
margin: 0;
#header p {
margin-left: -1000px;
display: block;
width: 145px;

#header img {
margin-left: -1000px;
display: block;
width: 0;
#header span {
position: absolute;
top: 15px;
left: 41px;
width: 146px;
height: 54px;
background: url(../images/logo.gif) no-repeat;
(10.09.2005, 12:37)

I guess only the extra image tag that holds the alt without any further text with the same background-image on <em> or <span> could be ok for some projects.
(10.09.2005, 13:02)

the title tag (as mentioned by Dave S.) could then provide some extra info.
(10.09.2005, 13:06)

Stu, I would like to fix a tooltip with a shadow but no go in IE. What is your e-mail again since you have this site URL just fresh.
(19.09.2005, 21:25)

I've used Stu's original method. Can anyone tell me how to link that picture to some page?
(29.09.2005, 14:38)

shi, I have updated the demonstration to show how you can use the image (as well as the text) as a link to another page.
(03.10.2005, 08:39)

10 of 35 comments (part 3). [ « ] [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page