Background Solid color (responsive)

Hello guys, I’m trying to create a 2 column (without using columns) background the simplest way possible. I need the first column to be 70% with some color and the other 30% some other color (see image)

But i also want it to be responsive so i was trying the background gradient but there are not enough controllers there to create what I want. I thought of doing a Div Block with 2 other div blocks inside with those percentages and then absolute position it with z-index, but I ask you: is it an easier way to do this? maybe I miss it.

thanks

I’m not sure what you are trying to achieve - it sounds like Flex box solve it for you

i just want this as a background:

using %
no image
possibly gradient background or solid color
responsive

I figured i can do it with flexbox, but i don’t want to use z-index or absolute position (if possible)

is there a way?

how would you do it?

I did it using grid and it only took me a minute

1 Like

that could work if the content was static. but i want to overlap, and im using scroll interactions later with transparent images so i want it to be fluid, not fixed. Sorry if im not making myself clear :frowning:

let me show you the UI.

I’m pretty sure that to achieve this effect, the computer can’t have a transparent screen. It needs to be the same color as the background of the left

A class applied to body. Simple.

CloudApp

2 Likes

Exactly. There’s definitely several ways to have a background like that. I’m still not sure about what his problem is haha

There’s no problem mate, I’m simply asking the community for ideas, that’s the main point isn’t? No need to get snappy. Have a great day

Thanks mate! I really appreciate it

I’m not getting snappy Mao. I’m sorry if you felt that way. I was simply commenting that I wasn’t able to understand what you are going after

But I’m glad to know that you have found your answer.

Happy designs

i think i cracked it… but i’m worried now about the different screen sizes (not responsive) for instance, looks awesome 2560 x 1440 but not so great at 1440 x 900 specially the nav bar, i think im going to set it with percentages… any ideas?

https://maodesignstudio.webflow.io/

Is your hope to have the navigation stay contained in the right-hand column?

I did something relatively similar on this site: https://bluenine.webflow.io

The small white rule/arrow that overlaps the columns is contained in a div set to a width of 0px with overflow visible and a z-index higher than the other elements. This arrangement would allow you to have your computer float above the other elements.

Yes, I want the nav bar contained and centered within the right column.

Did you detached the nav bar from the logo (brand) and aligned it to the right?

Here’s little sample I set up:

https://testnav123456.webflow.io/

https://preview.webflow.com/preview/testnav123456?utm_source=testnav123456&preview=db462e3f66e7012d4cccbcad09c5af97

1 Like

oh wow, thanks a lot… it’s perfect… exactly what i was looking for! very simple and clean! thank you again!

:wink:

Awesome! I just made it clone-ready if easier to copy/paste elements:

https://webflow.com/website/testnav123456?s=testnav123456

i think i almost got it!

https://maodesignstudio.webflow.io/

1 Like