How to add a background to text only ?

Question

I have a background image on top of which there is some text. It is very hard to read the text because of the background. I would like to add a white background just around the text itself, such that the text could be easily read. How can I accomplish this using CSS/Javascript/jQuery ?

Answer 1

i have the text contained in a <span> </span> with background-color:White; or whatever you want

Answer 2

well, "text" is a little bit imprecise. text can be in a paragraph, a div, a span etc.

if for instance, the 'text' you want to give a background is wrapped in spans, its just

$('span').css('background-color', 'white');

for instance. Another way, which doesn't have the best performance is to call

$('*').each(function(){
   if(typeof $(this).text != "undefined")
      $(this).css('background-color', 'white');
}     

Kind Regards

--Andy

Answer 3

I assume your background image is in a DIV or something... so you can nest the text inside.

For example... if you curently have:

<div>Some Text</div>
div{background:url(/path/to/image.png);}

You could change it to this:

<div><p>Some Text</p></div>
div{background:url(/path/to/image.png);}
div p{background:#fff;}

Good luck!

Answer 4

Wrap your text with a span:

<span class="white_bg">Your text here</span>

And put this in your CSS file:

.white_bg 
{
    background-color: #ffffff;
    padding: 3px; /*add this if you want a bit of space around the text*/
}

That should do it.

Answer 5

You could also use text-shadow that is implemented by the newest web browsers:

<div style="background: url(some_image.jpg); text-shadow: 1px 1px 1px #000; color: #fff">Readable</div>

or just do something like

<div style="background: url(some_image.jpg);"><p style="background: #fff">Readable</p></div>