Jump to content

Problem with background color for text/paragraph


dren68
 Share

Recommended Posts

I searched the forum for the answer to this but had no luck. What I'm doing is placing several paragraphs on top of a background image. In order to be able to read the text, I'm using a background color behind the text, which works fine. The problem is that the background color extends all the way past the last word on each line and covers up too much of the image with the blocks of color. Sort of like this...http://www.w3schools.com/css/tryit.asp?fil...ackground-colorWhat I want is for the color behind the text to end directly behind the last word on each line and then continue behind the next line of text and so forth. Is there any way to do this? I tried display: inline; which sort of worked, but it ran all the text together and I have several paragraphs, so that's not really what I want to do. Any help would be appreciated!

Link to comment
Share on other sites

I guess that will do, if there's no other way. The only thing with that is if there's a line with only two or three words, the black background still extends all the way to the end of the line, which is still what I'm trying to avoid if possible.

Link to comment
Share on other sites

what you want is possible to do with CSS but imagine that you have a paragraph with 3 line.The first 2 lines are full and the last one finish before the others. Here you will get the same problem.you can create a span element and set the background color. Than you get something like this<p><span class="highlight">bla bla bla bla</span></p>

<html><head><style type="text/css">span.highlight{background-color:yellow}</style></head><body><p><span class="highlight">This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.This is a text.</span></p><p><span class="highlight">hahaha</span></p></body></html>

See if like in example you get your problem solved.Paulo A. Silva

Link to comment
Share on other sites

Yes, that worked! I knew there had to be some way to do it. Thank you!
There are several other ways of doing this also: Set the width of each element :
h1{background-color: #00ff00; width:33%;}

Use the float property, Then position each element:

h1{background-color: #00ff00; float:left;}

The simplest way tho, if you can edit the HTML, is use display inline and a BR after each heading.:

<html><head><style type="text/css">body {background-color: yellow}h1{background-color: #00ff00; display:inline;}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}</style></head><body><h1>This is header 1</h1><br><h2>This is header 2</h2><p>This is a paragraph</p></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...