Re: Shopify Background image positioning
I'm working on the 'About Us' page of my store, and I want to add a background image (see the first picture with the pet paws) to my first section. The section is a rich text-image standard Shopify section. I've tried several approaches but continually face two major problems:
DESIGN:
I've added the image as a background image to that section, but no matter what I've done, I have been unable to change the Z-index of the image, so it was always displayed behind the rest of the content.
After that, I tried to add the image as a standalone section using Liquid and set the position to 'absolute.' It was then displayed correctly before the content, but the position changed with the screen size. I was unable to use the parent-child relationship since the image was now a completely new section.
I'm looking for any approaches or potential solutions to fix this issue. If any of you have done this in the past, even with different solutions, I would appreciate hearing from you so that I can handle this task. Thank you.
HOW IT'S LOOKS NOW:
CODE:
@media (min-width: 767px) {
img {
position: absolute;
z-index: 1;
padding-left: 100px;
padding-top: 50px;
padding-bottom: 50px;
object-position: 100% 50% !important;
border-top-left-radius: 15%;
border-bottom-left-radius: 15%;
}
.rich-text__container--fullwidth {
position: relative;
z-index: 99 !important;
background-image: url("https://cdn.shopify.com/s/files/1/0729/5503/5992/files/pawprints.png?v=1691582677");
height: 800px;
background-size: 100px 100px;
background-position: 57% 15%;
background-repeat: no-repeat;
}
}
