How to show background image on page

mowen10
Shopify Partner
33 0 0

Hi, through some help from my friend, I have managed to display prices for every product on a page and this works exactly the way I need it. The only issue I currently have is that I would like to add a background image to this page but for some reason the style that I have applied just won't show up.

.prices-page-bg {
    background-color: #fff !important;
}

The code on the page has been done using json but unfortunately my friend isnt currently around for me to ask him and need to get this fixed as soon as i can.

If somebody could please advise, would really appreciate it. The site can be viewed at the following:

https://prontaprint247.com/pages/prices-3

Thanks in advance

Replies 5 (5)
Ryan_H
Shopify Staff
34 1 11

Hi Mowen10,

I am Ryan from the Shopify Support team. 

Great question and happy to help. An easy way to create a background image for a specific page is to go to Online Store > Themes > Edit HTML/CSS and find the template the page is deriving from. Next you will want to create a new <div> </div> which wraps the whole page giving it a class you can target in the .CSS or .SCSS of your theme. Next upload the image to your assets folder in so it can be accessed. In the the .CSS of .SCSS file got to the bottom of the file and add this code.

pagex {
    background:url({{ 'your_custom_image.jpg' | asset_url }});
    background-size:cover;
}

 
Depending on your theme you may need to add this code to the .CSS or .SCSS to make sure the image fits and resizes to the different device windows and  different browsers.

html, body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

I hope this gets you pointed in the correct direction.

Ryan 

Shopify Support

Tejas_Nadpara
Shopify Partner
1034 215 518

1. First, upload your background image. To do this, go to Themes > Template Editor > Assets > Add a new asset. For this tutorial, we are going to upload a background image called “background-image.jpg“.

 

2. Now we are going to create a class for this background image. Go into Template Editor > Assets > theme.scss.liquid. Add following code at the end of file:

body.background-class {    background-image: url({{'background-image.jpg' | asset_url }});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    background-size: cover; 
}

Be sure that the filename of the background image you uploaded appears in between the single quotes.

Note: The code above will stretch background images to the fit the size of the browser. If your background image is repeating, or you don’t want it to be stretched, you can adjust the code. See this page for assistance.

 

3. Finally, you’ll want to tell the theme to load this background image specifically for this page. Go back to Themes > Template Editor > Layouts > Theme.liquid. Look for the following code:

 

<body class=".....">

You’ll need to add the code like following:

 

<body class="..... {% if page.handle == 'about' %}background-class{% endif %} ">

Note: here, 'about' is page handle. you can change it according your requirement. To check page handle click here.

 

As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
Patrycja
New Member
4 0 0

Hi,

I was wondering if you could help me with this. I have Narrative Theme, and would like to add a background image to my about us page.

I added it to: theme.scss.liquid

many different codes like:

body.background-class {    background-image: url({{'MY URL' | asset_url }});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
background-size: cover; 
}

and to Theme.liquid :

<body class="template {% if page.handle == ’about-us' %}background-class{% endif %}">

 

or

{% if template contains 'page' and page.url == '/pages/about-us' %}

 

or

<body class="template  
{% if page.handle == ’uber-uns%}background-class
body {
    background-image: url({{ 'https://cdn.shopify.com/s/files/1/0553/8204/8942/files/Uberunswiekszenapisy-kopia.png?v=1619531283' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}
{% endif %}">

 

im sitting here about 30h and nothings happens! 
Can you maybe fix the code so I can just copy and paste it?

Thank you in advance!
Patrycja

MazenObeid
New Member
1 0 0

Hi Ryan,

could you please shed some more light on how to create the <div> part and what's involved in this process?

Thanks,

Mazen 

khilan
Trailblazer
226 13 23

hi @mowen10 

please follow this stapes by stapes.

1. First, upload your background image. To do this, go to Themes > Template Editor > Assets > Add a new asset. For this tutorial, we are going to upload a background image called “background-image.jpg“.

2. Now we are going to create a class for this background image. Go into Template Editor > Assets > theme.scss.liquid. Add following code at the end of file:

body.background-class {    background-image: url({{'background-image.jpg' | asset_url }});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;   
     background-size: cover; 
}

thank you so much.

khilan.

Shopify Expert | Skype: khilan.mendapara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on khilan.mendapara1995@gmail.com regarding any help