Hi, I am looking for a little best practices feedback.
I’ve got a 2 page site (very much under construction). The 1st page uses the default video background in 1st section then there are 3 sections below it where I have placed am image with a z-Index of -1 then type blocks that overlap the image.
Using this approach I’ve customized the top margin of each project image and the text blocks so that the images ‘stack’ properly (don’t overlap). It’s quite a fiddly/time consuming approach and I’ll have to customize the margins for mobile/tablet etc. The end result/layout for desktop though is the result I’m looking for.
Is there an easier way to achieve this layout? I’ve no doubt my approach is not standard/best practice, shows my novice skill set, and my beginner knowledge of CSS. I am learning as I go here. I have watched the webflow tutorials and this is a work in progress/ practice site.
I should also add I tried just setting the section background image as the image, but this caused the image to get cropped when the browser is resized. Here is my attempt at that. https://preview.webflow.com/preview/sitedev2?preview=197625c72b6f10bb2c456167ae409db9
Again, At least the -1 z-Index version works the way I want it to.
Thank you in advance for any advice/thoughts.