Z-index broken after update

[myazbeck]

It doesn’t seem I can reply to my previous post here:

Z index broken

So I created a new post instead with my answer:

I did what you asked however not it looks like this:

Which is not what I want. I want the background image to cover the entire column (similar to how it is now)

Why can’t this be achieved with z-index? It was working fine before the new update, not I see the same issue on this page:

Print Design - Splash Design

“CUSTOM PRINT DESIGN” should be on top of the image?

[ruenel]

Hello There,

Thanks for posting in! Please keep in mind that z-index goes along with positioning of the element within the container. Do you want something like this?

Without using z-index and position, you can simply add the image a a background for your entire row instead. One thing also to remember is that when an image is used as a background image, you must consider how background image size works. There is no guarantee however that the image will not be cropped because thats not how the background image works.

With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html2 which would explain how background image works.

By default, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

[myazbeck]

No that is not what I want.

Can you look at this page and help out on here instead:
http://www.splashdesign.co/illustrations/

I did what you asked in that post, but it didn’t turn out correctly.

It was working fine before. But now the z-index properties don’t work. I don’t want to use background image urls.

[ruenel]

Hello There,

Thanks for updating in! The position and your z index will not work. Z-index works within columns only. At your current set up, the image and the text is in separate rows. To make this work, you will have to switch the rows. The image should be first and then in the second row will be the text. Your -500px should only be added in the column containing the text element so that you will get a result like this:

Hope this helps.