CSS: Background Image For Text

if( while ) switch{ coding } ++ — Page [1]

molkman
Owner of George Washington's Prototype Mittens

2005 May 2 • 2066
404 ₧

Hey guys,
I'm super new to CSS stuff and I couldn't find a solution on the interwebs for what I want to do, so maybe some of you could help hereeee.

I want to use an image as a background for some text. The image should only go as far as each line goes. However, all I could do was have the image as background, but start anew each line. I want it to be one image behind the whole text. (One looping pattern)

Anybody know a solution?

Thanks!

LET LOVE REIGN

≡

2013 Jun 11 at 16:17 UTC — Ed. 2013 Jun 11 at 16:18 UTC

Rockbomb
Dog fucker (but in a good way now)

2009 Nov 14 • 2045

link

Also, be careful with putting image behind text... most of the time that's frowned upon in the design world, unless it's a simple gradient or something.

≡

2013 Jun 12 at 10:24 UTC

molkman
Owner of George Washington's Prototype Mittens

2005 May 2 • 2066
404 ₧

A table would basically produce a straight rectangle around the complete paragraph, I'd like each line to have its own background rectangle as long as the specific line. But I'll look around that webpage some more, it seems to have dandy stuff, thanks.

Here is what I'm doing right now: http://exotworking.com/index2.php

Basically, what's frowned upon in "the design world" are usually the things that are most fun to do.

LET LOVE REIGN

≡

2013 Jun 12 at 14:06 UTC

SuperJer
Websiteman

2005 Mar 21 • 6666

I can't get it to work. It might not even be possible.

It seems you need a <span> (inline elem) to get the background to closely match the text, but then you can't have a continuous image.

If there was some way to do masking between elements it would be easy. But the only masking stuff has to do with images, not text.

There is this CSS background-clip property which is close, but not quite. This is interesting: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html

≡

2013 Jun 17 at 19:12 UTC

molkman
Owner of George Washington's Prototype Mittens

2005 May 2 • 2066
404 ₧

Okay, cool.

Maybe adjusting the image to the line height might come close to it then. But I always fear that text sizes vary between browser (settings).

Thankss.

LET LOVE REIGN

≡

2013 Jun 18 at 11:28 UTC

Page [1]