Hey,
What’s the easiest way to place a container between two backgrounds? My page i.e if I want the ‘get access’ container to be sitting halfway on the red halfway on the blue background as in the photo. I’ve used position: absolute before but that was for a small item.
I’m unsure if I need the container inside/outside the footer. The photo isn’t too clear but the container is sitting in the middle of two joining backgrounds (light gray/dark blue)
Cheers
Hey there,
I’m having a hard time to understand your issue.
It would be great to see some before and after images.
The photo isn’t too clear but the ‘get access today’ container is essentially hovering over two difference backgrounds (dark blue & dark gray).
Alright and your questions is “What is the best solution to reach this goal”?
If yes, can you come up with some solutions and their pros and cons?
Still stuck with this one. I’ve tried position relative/absolute but it just makes everything else much harder to deal with as it’s already been positioned.
Without more information, I think it would be ok in this case to use a negative margin to nudge the form down a bit:
margin: 10rem auto -5rem;
(if you give only three values to margin, the first will be margin-top, the middle one is margin-left AND margin-right, the third one is margin-bottom. So you can leave out that fourth value you have in your current CSS)
Will give a try thank you!
By not doing that. You have an element. in the HTML it will be a sibling of the footer. You give it a vertical linear gradient background, two colours (the light grey & dark blue), one stop at 50%. Pad it. In that element you nest the form. The element will size to whatever the content is, the gradient background stop point will always be in the centre, no need to position anything. Footer gets the dark blue background, whatever is before the element gets the dark grey background.
<Some other element (bg: dark grey) />
<Form wrapper (bg: linear gradient, padding: n)>
<Form (bg: dark grey, rounded corners, box shadow etc) />
</ Form wrapper>
<Footer (bg: dark blue) />
Thank you, will also try this way!