Hi guys,
I did my first (portfolio) website, and I`m struggling with overflow. My first section has this black X image which I wanted to overflow second section to have this fluid beginning, and whatever I did in terms of positioning (I tried with relative/absolute between sections elements, and I had my z-index according to priority) nothing worked. Right now everything is back at the beginning (static), and all overflows are turned visible, because I really lack ideas how to solve this. If anyone could help I would be extremely grateful guys!
You’ll want to set it up more like the screen grab below.
Basically, if you’re wanting to cover two sections with an overflowing element, you’ll want to arrange those two sections within a parent, and then play around with things from there.
I removed all background colors and graphics from the two sections and then assigned those properties to the parent.
thank you so much! I have one additional question> I did those steps, but somehow my photo is way smaller and its contained in first section (and your printscreen is just as I wanted mine to be). Could you please tell me how you positioned it that way?
Thaaanks for all!
I gave the image a height of 150vh.
I used the png file because the svg would not stretch. This was a quick test tho, if you want it to stay proportioned that’s possible too. Just need to turn off overflow on your parent element.
Different ways to do it too. Rather than using an image file with absolute, you could instead apply a background image to the parent div and use the “cover” property to fill the space.
