CSS: Background Image For Text

CSS: Background Image For Text

molkman
Owner of George Washington's Prototype Mittens

Marine Warfare Corporal
Find the Hole Participation Medal
Find the Hole II Participation Medal
Tasty Br�twurst Medal
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

Marine Warfare Corporal
Find the Hole Participation Medal
Find the Hole II Participation Medal
Tasty Br�twurst Medal
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 • 6644
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

Marine Warfare Corporal
Find the Hole Participation Medal
Find the Hole II Participation Medal
Tasty Br�twurst Medal
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]