Have Geek Brain

How to add only text to text?

I have a background image with text on top of it. The background makes the text very difficult to read. I would like to add a white background just around the text itself so that the text can be easily read. How can I do this using CSS / Javascript / jQuery?

+2


a source to share


4 answers


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*/
}

This should do it.

+4


a source


I have text contained in <span> </span>

with background color: white; or what you want



+7


a source


I am assuming your background image is in a DIV or something, so you can insert text inside.

For example, if you have:

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

You can change it to this:

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

Good luck!

0


a source


You can also use the text shadow implemented by the latest 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>
0


a source






More articles:


All Articles