Rough Edges Background

[shapper]

Hello,

I have an anchor which I would like to have a background image with
rough edges.

How can I do this with CSS?

One of the solutions would be image replacement using CSS ...
.... I am not sure if this works in all browsers, or if is good for
search engines.

Could someone, please, tell me what are the options I have and if
image replacement is a good option?

Thanks,
Miguel

[Joost Diepenmaat]

shapper <md*****@gmail.comwrites:

Hello,

I have an anchor which I would like to have a background image with
rough edges.

How can I do this with CSS?

One of the solutions would be image replacement using CSS ...
... I am not sure if this works in all browsers, or if is good for
search engines.

Could someone, please, tell me what are the options I have and if
image replacement is a good option?

Looks to me you're over-engineering; what's wrong with background-image?
--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[shapper]

On May 15, 11:42 am, Joost Diepenmaat <[e-mail]:

shapper <[e-mail]:

Hello,

I have an anchor which I would like to have a background image with
rough edges.

How can I do this with CSS?

One of the solutions would be image replacement using CSS ...
... I am not sure if this works in all browsers, or if is good for
search engines.

Could someone, please, tell me what are the options I have and if
image replacement is a good option?

Looks to me you're over-engineering; what's wrong with background-image?

--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/

The font size is in em ... how can I create a background image that
give rough edges around the text even when text gets bigger or
smaller?

Thank You,
Miguel

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

http://www.tidraso.co.uk/misc/sizedBackground.html

In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

<http://dorayme.890m.com/alt/justPics/fuzzybg.png>

--
dorayme

[dorayme]

In article
<63**********************************@w7g2000hsa.g ooglegroups.com>,
shapper <md*****@gmail.comwrote:

http://stopdesign.com/articles/replace_text/

"Notice the primary titles for each section or page (ie.: the words
³Recent Log Entries² on the <link>front page</link>)"

Can you find "Recent Log Entries" on the page linked to with the words
"front page"?

--
dorayme

[Ben C]

On 2008-05-15, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2008-05-15, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

http://www.tidraso.co.uk/misc/sizedBackground.html

In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

<http://dorayme.890m.com/alt/justPics/fuzzybg.png>

Thanks, good screenshots.

FF is showing the desired effect. Opera is probably reminding Americans
of some horrible candy they enjoyed as children.

Do you still have "rock" at the seaside in England? I used to get
Blackpool rock, and Llandudno rock (Wales) and Rhyll rock (Wales) when
on holidays.

Yes you can still get that.

(Rock, Jonathan, is not code for drugs, it is a candy stick, gruesomely
sweet, thick as a broom handle, with the words that go in a circle as
seen from the end that is being sucked, the words remain right through
the length).

And the fun of it is watching the words distort as you go.

A better way to do the fuzzy bg, but even less supported, would be to
use

.fuzzy:before
{
url(fuzzy.png);
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

instead of

.fuzzy img
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

then you could leave out the img tags. But Firefox (the only browser in
which the original solution works) seems to restrict the range of styles
you can apply to pseudoelements.

[Ben C]

On 2008-05-15, shapper <md*****@gmail.comwrote:

On May 15, 11:56 pm, dorayme <[e-mail]:

>In article <[e-mail]>,
Ben C <[e-mail]:

On 2008-05-15, dorayme <[e-mail]:
In article <[e-mail]>,
Ben C <[e-mail]:

>>http://www.tidraso.co.uk/misc/sizedBackground.html

In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

><http://dorayme.890m.com/alt/justPics/fuzzybg.png>

Thanks, good screenshots.

[...]

Ben, when talking about image replacement I was talking something
about this:
http://stopdesign.com/articles/replace_text/

Or this:
http://www.mikeindustries.com/blog/archive/2004/08/sifr

And I was also looking at sprites:
http://www.alistapart.com/articles/sprites

Anyway, just read a few things to try to see if I could adapt to solve
this problem but I suppose from your help that I need to reformulate
my design.

I think the image replacement method is the way to go here. The solution
I suggested is not really practical.

[Rik Wasmus]

On Fri, 16 May 2008 00:20:59 +0200, dorayme
<do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>http://www.tidraso.co.uk/misc/sizedBackground.html

In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

<http://dorayme.890m.com/alt/justPics/fuzzybg.png>

Hmmm, your Opera (/OS) is not my Opera (/OS). Opera 9.27 @ wXP64 does
place the background behind the text. Still lets it run to the right
though.

--
Rik Wasmus
....spamrun finished

[dorayme]

In article <op***************@metallium.lan>,
"Rik Wasmus" <lu************@hotmail.comwrote:

On Fri, 16 May 2008 00:20:59 +0200, dorayme
<do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

http://www.tidraso.co.uk/misc/sizedBackground.html

In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

<http://dorayme.890m.com/alt/justPics/fuzzybg.png>

Hmmm, your Opera (/OS) is not my Opera (/OS). Opera 9.27 @ wXP64 does
place the background behind the text. Still lets it run to the right
though.

Mine is

9.24
Build
3707
Platform
MacOS X
System
10.4.10

--
dorayme