Add scrolling background image to local theme

Store Design
1

Looking to get this image: https://cdn.shopify.com/s/files/1/0743/5744/0790/files/Berg-4974_Large_2.jpg?v=1701298503

to be centered on my homepage and stay fixed behind you when you scroll.

Tried following the other questions to modify theme.css and a few others and can’t get it to work properly.

2

Hi @bgibbs

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

3

Hi @bgibbs ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4
5

Hello, find the theme.css file and add the following code:

body::before {
  content: '';
  background-image: url(https://cdn.shopify.com/s/files/1/0743/5744/0790/files/Berg-4974_Large_2.jpg?v=1701298503);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

This is the result: Off-Road Parts and accessories for Cayenne, Q7, and Touareg – Berg Peaks Off-Road - Google Chrome 2023-12-01 09-25-37.mp4

1 Like