Adding text over the top of an image with a "banner" behind it
https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form
I'm being tasked with creating a signup form, and I think I have an idea of how to do the majority of it, but I'm struggling a little bit with the positioning!
My issue: As you can see I have the leaf background and text where I want it, however I'm trying to figure out how I add a background to the text which currently has "position: absolute" on it.
P.S. Please don't give me the exact answer, but any helpful tips are appreciated i.e. "have a look into X, Y or Z" 🙂
Current code: https://codepen.io/Laing91/pen/dyQzYJw
I've bodged it together at the moment with code because I just wanted to try and get a rough layout started that I can work on fixing later.
Project: Sign-up Form | The Odin Project
The Odin Project empowers aspiring web developers to learn together for free
12 Replies
just to clarify, you're going for something like this?
That's the goal, yes 🙂
Cool! I think the potential issue here is that you are trying to set the background of the
text-background div, but in this situation that might not be needed at all! Try playing around with other elements you can apply the background toI didn't think of that, thank you. The challenge had me do it on a div, which had me scratching my head a wee bit.
Let me know when you figure it out! I've got a goofy solution on codepen
I cannot quite figure it out 😛 I have the background, but I encounter the issue where if I add background color to the h3, and then add opacity, it's also dulling out the text, so I'm a weeeee bit stuck.
I tried doing background-color: 48, 48, 48, 0.5; but it didn't seem to do anything (thought it would)
Ah don't add opacity, it applies it to the whole element and any children inside of it
Yea background-color works, at least it did for me. If it's not for you I'd recommend stripping out some css until you can get it to work
this worked
What was your goofy solution btw? I'm curious!
https://codepen.io/vince1444/pen/vYQJNvo
This is more lines and work than just using position relative and absolute to overlap them haha
haha fair enough, that works too. I may have to change what i've done later, as I now have to add the rest (I was planning to use grid to create the rest of it as it looks like it's 3 sections on the right side), but that's for tomorrow, hopefully.
You got this, ez stuff 😤 💪
think so! 1 step at a time 😄
Oh boy, ok so I have to build this using flexbox, not grid. I've got a main, and 2 sections (left container, right container), and I'm trying to use flex-grow to arrange the sizing (the background image is about 30% of the page), however even if I do flex-grow:1 and flex-grow: 12, it's still sitting at like a 40/60.
I then have to figure out how to do the right side, which is effectively just the form in the middle of the page, a bit like the Odin text on the left (you can see it in the link)