Shopify Background image positioning

Robert2k
Shopify Partner
9 0 0

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:
Screenshot 2023-08-10 100529.png

  1. 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.

  2. 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:

Desktop Screenshot 2023.08.10 - 10.25.20.59.png

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;
}
}

Replies 2 (2)

Moeed
Shopify Partner
3692 931 1163

Hey @Robert2k 
Kindly share your Store URL and Password if enabled

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Robert2k
Shopify Partner
9 0 0

Sure: https://longevity-pet.myshopify.com/
And pass: long3v1t7