How to add a background image to the product page (narrative theme)

Store Design
1

I’m trying to add an background image to the product page. This is what I have so far:

body.product-template {
background-color: transparent;
background: url({{ ‘background.png’ | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

I used a similar code for the password page and that worked fine, any help would be greatly appreciated!

2

hello @Meridian2012

please use this CSS for adding background images in to product page

body.template-product {

background-image: url({{ 'background.png' | asset_img_url: 'original' }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
     }
3

Thank you!

4

where in the code should this be pasted, and does this do this for all product pages or can I make it a different image for a each product page?

1 Like