Using images with -1 z-Index

[PageMill_1_0 (edward porter)]

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.

here is my site share:
https://preview.webflow.com/preview/layout-test-0e2e26-bf4346e2a954d9940a14?preview=7999e858977a73367126cfea0421addb

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.

[thewonglv (William Wong)]

Hi @PageMill_1_0, Can you please update your post with specific designs/screenshots so we can help you faster?

At first glance, my advice would be to treat z-index similar to how you treat layers in Photoshop - instead of going “-1”, try increasing the z-index of other elements.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance!

[PageMill_1_0 (edward porter)]

Thanks! - I’ll try giving the other elements a +1 Z-index. It does seem more work to assign a Z-index to all the elements on every section rather than just give -1 to the image. But if it’s a better web practice then I’ll do.

For specific designs/screenshots the site share does accurately reflect what I want the design to look like.
https://preview.webflow.com/preview/layout-test-0e2e26-bf4346e2a954d9940a14?preview=7999e858977a73367126cfea0421addb

I’m also attaching a jpg mockup of design (using webflow default video in top section).

Maybe another way to understand what I want is to view this site:
http://trollback.com

This site has a splash video that resizes to fill the browser window. Below it are jpgs 1920x1080. Each jpg is for a specific project and resizes to fill the browser window (but you always see 100% of the image). Clicking on the button on the jpg takes you to a page with a vimeo player that fils the screen and has jpgs below it. Very similar to what I have in my share.

Again my real question is this - What is the best practice for building? Should I be using images the way I am with the buttons and text overlapping Z-index? Or is it ‘cleaner’ code to build using the image as a background in a section?

If the answer is both approaches are fine, that is ok with me. I just want to know that I am building in a way that makes sense and is the easiest/best approach for what I am trying to do.