text background color in CSS

background color is across the entire page

[PatrickDeese]

I'm a CSS novice. Forgive me if this is basic stuff.

I have a page background image which is black and yellow. In order to make the text more readable in areas that cross over the yellow portions, I have specified the text background as black:

p{
font-family: Verdana,Arial,Helvetica,Sans-Serif;
color: #ffffff;
background-color: #000000;
}

However, I am seeing that the entire "row" of text is now black.

In other words if I had a page with <p>hello world</p> centered on a page, the black background extends for the entire width of the page.

Is there some sort of way to have *only* the text portion with the alternate background color - or is it one or the other?

thanks.

[Reflection]

Try using a <span> tag instead of <p> tag. Span is an inline element so the background will be as wide as the text in the span tags.

In order to make the text more readable in areas that cross over the yellow portions, I have specified the text background as black

You will probably have a difficult time with this because the text may not always be located in exactly the same spot, due to different user text sizes and screen resolutions etc.

[Birdman]

Try wrapping the aforementioned text in a span and apply the style to that instead. Paragraphs are block-level and spans are inline elements.

...Or, you could add display: inline; to what you already have.

^Birdman

Dang, you beat me to it, Reflection :)

[PatrickDeese]

Thanks guys.

Birdman's suggestion of using display: inline; worked, in the sense the it only showed the background where the text was, however, it deformatted the margins, the alignment and etc.

I couldn't get the span to work in any way, shape or form.

:(

[Reflection]

OK try this.

<p>I couldn't get the <span class="black">span to work</span> in any way, shape or form.</p>

Then in your style sheet...

.black{background-color: #000000;}

[PatrickDeese]

well. I thank you. It works as advertised.

Embarassingly, I suspect that I may have typed <spam="black"> instead of span. Good thing I caught it, wouldn't want to deal with a Hormel lawsuit right now. :)

[Reflection]

LOL

Ive typed spam a few times myself :)

[PatrickDeese]

You will probably have a difficult time with this because the text may not always be located in exactly the same spot, due to different user text sizes and screen resolutions etc.

It is a repeating pattern, just decorative. I am not trying to get a particular block of text to align exactly on top of it of the light or dark parts - but to make sure the text is readable, I required the text to show its own black background - to make sure that it is always white on black.