Hi, I have a div, which I linked an image in. It’s a large image and feature of the site.
I wanted to make some text overlay, and have a background color that is different.
I am using nested Divs here to try and make the effect, the text and the background color that fills the second div is overlaying on top of the image. How can I use css to make sure my div with text in it sits on top of the first div containing the image?
In your example you had only one span, and it worked. I want to style my lines of text differently within the span. So I thought, Ok, make multiple spans. But when I added a second span to that code you linked on jsfiddle it would only show 1 span at a time. How can I get it to show multiple ones so I can style the text differently?
Only one shows because they’re being stacked on one another with the absolute positioning. A simple fix is to position a container and use spans within the container to style the different text. http://jsfiddle.net/BpGQp/
This is what I’m trying to achieve. It’s just an image in photo shop of the specific section of what we are talking about.
So, I checked out your example, and I see how you did it. I have my code setup that way now, but I noticed in practice your max width is important. It is important because it moves the text to the next line. Since I need mine to be on a new line and I need width to be 100% should I use [p] tags instead of [span] tags inside the structure you sent me wolfcry911?
note: wouldn’t let me use <> tags like in html because it interprets them.