CSS help and suggestion
Considering this image. I want to implement the same contact form. which cover half of the header section and half of the white section. What are the best way to make it possible.
My approach:
<div className="bg-grey">
<Navbar/>
<Header/>
</div>
<div className="ng-white absolute bottom-5%">
<contactus/>
</div>
I am not sure, is this a better approach.
10 Replies
@mozi47 That sounds about right. Another similar approach is to push the gray background upwards instead, since it doesn't interact with anything else and is less likely you'll have to tweak other elements because of this.
Btw, you can't really push the background, you'll have to create another element just for this and place it absolutely at the top of the document. Either way it's the same principle as yours just this small difference
Wow. Thank you Joao.
You could use a linear-gradient on the background of the contact-section without an actual gradient.
That's pretty clever didn't even think of it. Probably cleaner as well
what if the background is image
I tried this linear gradient. But the background of the header section is image in my case
Then you can move it as you thought originally. Or you could cut the image entirely but may not look too good, and I'm not entirely sure you can combine it with linear gradient? I think someone with more experience on this can give better advice
Thank you Joao. Appreciate your time.
Unknown User•14mo ago
Message Not Public
Sign In & Join Server To View
Thank you. This was really helpful.
I like this approach. I will use this.
Just little tweak
https://codepen.io/mozi47/pen/ZEqMBKj