putting an image link into the CSS

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it. Here is the old HTML:

<a href="somewhere.html"><img src="anImage.gif"/></a>

The image is 18x48

On 2007-09-22, Cartoper wrote:

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it.

CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Here is the old HTML:

a href="somewhere.html"><img src="anImage.gif"/></a

The image is 18x48

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <cfajohn... (AT) gmail (DOT) com> wrote:

CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

In article
<1190511827.304331.306820 (AT) r29g2000hsg (DOT) googlegroups.com>,
Cartoper <cartoper (AT) gmail (DOT) com> wrote:

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <cfajohn... (AT) gmail (DOT) com> wrote:

CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

If your images are just for decoration, and you want them to be
background, then that is simple enough, the image will fit in the
element if the latter is dimensioned sufficiently. Something
like:

background: #fffcdf url("pics/montageStrip50.jpg");

But your initial desire to making the image a link will have to
be modified to wanting to make some other content of the element
a link. You will find it not easy to make the whole area taken up
by the background a link without playing tricks and having it
work well cross browser. But someone may have a simple answer for
you? I say, put in the pic as foreground and make it a link if it
is meaningfully something that people will understand. Or leave
images as background but make other provisions that people will
understand as meaningfully a link (like some text).

--
dorayme

Cartoper wrote:

On Sep 22, 7:30 pm, "Chris F.A. Johnson" <cfajohn... (AT) gmail (DOT) com> wrote:
CSS is for presentation, not content. You cannot do it with CSS
unless you want it to be a background image.

Exactly, I am trying to figure out how to make it the background image
of the link. What I am trying to do is move all the presentation
formatting to the CSS, including the images. The ultimate objective
is to be able to change the CSS file and change the whole theming of
the site.

Wrong approach.

Your `img' element requires an (here: non-empty) `alt' attribute value in
either case, for validity and accessibility. Which clearly indicates that
an image that is the content of an a[href] element is not presentational, it
is content. You will have to replace that content with something else if
you use a background image, because otherwise that link will no longer be
accessible for people and ignored by search engines. (There is no way to
specify a textual alternative for background images.)

But if you use text and a background image, it is likely that you will run
into accessibility issues in the case CSS is supported and the
"presentational" background image can be perceived by the user (e.g. bad
contrast and scaled fonts).

And if you put the text into the image and make the content transparent to
avoid that, it is not unlikely that this will be (mis)recognized by search
engines as an attempt to trick them, therefore being ignored as well and
your site maybe blacklisted.

So you you better stick with the `img' element, and provide the `alt'
attribute. And if theming is an issue, there is server-side scripting.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

Thomas 'PointedEars' Lahn wrote:

But if you use text and a background image, it is likely that you will run
into accessibility issues in the case CSS is supported and the
"presentational" background image can be perceived by the user (e.g. bad
contrast and scaled fonts).

?

If you mean the text is in the background image, then that can most
definitely be a problem.

However, plain text links styled with a background image can be very
accessible, providing they are done correctly. A patterned bg can
certainly pose a readability problem, but common effects like drop
shadows are not. Look up 'CSS sliding doors' for example.

And if you put the text into the image and make the content transparent

Are you referring to image replacement? That's the common term for
hiding foreground text with background images via various CSS
techniques. IR was originally developed strictly to benefit search
engines and pretty much all methods have some kind of accessibility problem.

it is not unlikely that this will be (mis)recognized by search
engines as an attempt to trick them, therefore being ignored as well and
your site maybe blacklisted.

I wouldn't go that far, though keyword spamming may get you blacklisted
no matter how you do it.

So you you better stick with the `img' element, and provide the `alt'
attribute.

I think it really depends on the context, which the OP hasn't provided.

--
Berg

Bergamot wrote:

Thomas 'PointedEars' Lahn wrote:
But if you use text and a background image, it is likely that you will run
into accessibility issues in the case CSS is supported and the
"presentational" background image can be perceived by the user (e.g. bad
contrast and scaled fonts).

?

If you mean the text is in the background image, then that can most
definitely be a problem.

No, I mean text "above" the background image, as content of the `a' element.
The multi-colored background image would render the foreground hardly
legible, if that. And if the background image was single-colored (which is
unlikely in this case), in most cases a background color would have sufficed
instead.

However, plain text links styled with a background image can be very
accessible, providing they are done correctly. A patterned bg can
certainly pose a readability problem, but common effects like drop
shadows are not. Look up 'CSS sliding doors' for example.

"Sliding doors" is interesting, thanks for that. However, the OP posted a
link that contained only one `img' element. That would mean that the image
would have conveyed the meaning of the link. I have explained why that
element can not be substituted by a background image.

And if you put the text into the image and make the content transparent

Are you referring to image replacement? That's the common term for
hiding foreground text with background images via various CSS
techniques.

I meant that the text that should have been the value of the `alt' attribute
would be moved to the background image. Then the `img' element would be
replaced by the previous `alt' attribute value and the text of the `a'
element would be formatted transparent:

<a href="..." style="background: url(...) no-repeat; color: transparent"

alternative</a

This would be accessible for people with bad sight or without sight, because
the screenreader would read, and the Braille line would yield

alternative

However, it would not longer be accessible for other people (at least it
would look weird to them if suddenly they encountered text they did not see.

And search engines, because they can not recognize the context (that would
require OCR on the background image), would frown upon this. See below.

IR was originally developed strictly to benefit search engines and pretty
much all methods have some kind of accessibility problem.

An `img' alement with a proper `alt' attribute value has no accessibility
issues at all.

it is not unlikely that this will be (mis)recognized by search
engines as an attempt to trick them, therefore being ignored as well and
your site maybe blacklisted.

I wouldn't go that far, though keyword spamming may get you blacklisted
no matter how you do it.

I knew already that Google recognized white text on white background as an
attempt to trick it, and that it did not matter how much text that is.

I did not know exactly until now, but "Using CSS to hide text" would
certainly also apply to `color: transparent':

http://www.google.com/support/webmas...y?answer=66353

So you you better stick with the `img' element, and provide the `alt'
attribute.

I think it really depends on the context, which the OP hasn't provided.

They have provided enough to make an educated guess.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Thomas 'PointedEars' Lahn wrote:

Bergamot wrote:

plain text links styled with a background image can be very
accessible, providing they are done correctly.

the OP posted a
link that contained only one `img' element. That would mean that the image
would have conveyed the meaning of the link.

But since the OP did not include any alt text for that image or the
context of its use, let alone a link to the graphic itself, you're
making an assumption that it is not a picture of text. I'm assuming it
is, as in a navigation menu with graphical "buttons", which are easily
done using plain text links styled with CSS.

I have explained why that
element can not be substituted by a background image.

It depends on the context and we don't know what that is. Besides, you
seem to think that the same image used as foreground content must be
used as a background graphic instead. That may not be necessary at all.

a href="..." style="background: url(...) no-repeat; color: transparent"
alternative</a

"transparent" is not a valid value for the color property, so browser
rendering would surely be unpredictable. I've seen lots of different
image replacement methods, but never seen this one attempted.

I think it really depends on the context, which the OP hasn't provided.

They have provided enough to make an educated guess.

I think some of your assumptions may be incorrect, but that's just *my*
educated guess.

--
Berg

Bergamot wrote:

Thomas 'PointedEars' Lahn wrote:
Bergamot wrote:
plain text links styled with a background image can be very
accessible, providing they are done correctly.
the OP posted a
link that contained only one `img' element. That would mean that the image
would have conveyed the meaning of the link.

But since the OP did not include any alt text for that image or the
context of its use, let alone a link to the graphic itself, you're
making an assumption that it is not a picture of text.

Quite the opposite. Because the `a' element contained nothing else but
the `img' element, the `img' element has to refer to a graphic providing
information about the purpose of the link.

I'm assuming it is, as in a navigation menu with graphical "buttons",
which are easily done using plain text links styled with CSS.

Nevertheless such an image would still not be presentational (it has
*meaning*), and so CSS would be the wrong approach.

I have explained why that
element can not be substituted by a background image.

It depends on the context and we don't know what that is.

We don't need to know. The OP stated:

Here is the old HTML:

a href="somewhere.html"><img src="anImage.gif"/></a

The image is 18x48

Ignoring that this is not HTML, I don't see how it could be more clear.
But from the dimensions of the graphic, you are probably right that it
is some kind of an icon.

Besides, you seem to think that the same image used as foreground content must
be used as a background graphic instead. That may not be necessary at all.

That was the solution provided, which I debated as being feasible.

a href="..." style="background: url(...) no-repeat; color: transparent"
alternative</a

"transparent" is not a valid value for the color property,

Although the rationale for that escapes me, it probably will be valid in CSS3:

http://www.w3.org/TR/css3-color/

so browser rendering would surely be unpredictable.

Correct, for the time being. Even Firefox 2.0.0.7 does not support it yet.

I've seen lots of different image replacement methods, but never seen
this one attempted.

Add me.


PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

On 23 Sep, 00:05, Cartoper <carto... (AT) gmail (DOT) com> wrote:

I want to move the image for a link from the HTML to the CSS, but
cannot figure out how to do it.

Don't. CSS only does "background" images, and that's probably not what
you want.

Use an <img> tag, same as you always did. CSS doesn't have a direct
equivalent for this.