- This topic is empty.
May 20, 2013 at 10:48 pm #44915
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?May 20, 2013 at 11:33 pm #135797iDevParticipant
From what I understood, Id make a span tag for the text and set it to absolute while the parent element has a position of relative.
jsfiddle example here: http://jsfiddle.net/iDev/nCfbe/May 21, 2013 at 5:18 am #135858Paulie_DMember
>I am using nested Divs here to try and make the effect
To be honest this sounds more like a structure problem than anything else.
Is there a reason you couldn’t make the large image a background image instead of being inline. I think this would simplify things greatly.
I’d like to see an link to the site or a reduced case in CodepenMay 21, 2013 at 8:09 am #135830Paulie_DMember
However, here’s one way using `figure` & `figcaption` elements and positioning as mentioned by iDevMay 21, 2013 at 12:22 pm #135880
Awesome, thanks guys. That’s exactly what I meant.May 21, 2013 at 12:49 pm #135883
Ok, second question, which shouldn’t be hard but it doesn’t seem to be working.
You linked : [http://jsfiddle.net/nCfbe/5/](http://jsfiddle.net/nCfbe/5/ “”)
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?May 21, 2013 at 1:07 pm #135885wolfcry911Participant
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/May 21, 2013 at 4:00 pm #135900
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.May 21, 2013 at 7:14 pm #135916
- The forum ‘CSS’ is closed to new topics and replies.