How to add my own custom background image

New Member
1 0 0

Hi,

I'm trying to design my online store and change the background from the normal plain white. I've read through about 20 different forum discussions that said to use the template editor theme.scss and style.css but I have those no where on my editor. Is it because I am using the free template that I'm not allowed to edit it my store or is there another way? Thanks! 

0 Likes
Shopify Staff
Shopify Staff
283 0 45

Hi Theresa,

Your theme is a little bit different, this is how you can achieve that:

  • Visit your Online Store > Themes in Admin
  • Click the [...] button for your theme, and choose Edit HTML/CSS
  • Search for the timber.scss.liquid file, under Assets
  • At the very bottom, paste this:
  • body {
      background-image:url('https://www.IMAGE_ADDRESS_HERE.jpg');
    }

     

You will need to have your image hosted online, use Settings > Files to upload it. The example link in the brackets will need to be replaced. Please let me know if you had any other questions about this!

Hugh 

Happy selling! :)
0 Likes
New Member
8 0 0

Hi i tried this but nothing changes. I have the image uploaded to my files, added the url but nothing changes!

Can you help at this?

0 Likes
Shopify Partner
507 111 152

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
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
1 Like
Shopify Partner
28 0 0

Is it possible to have a different background image for mobile vs desktop?

 

I want mobile to focus on a different part of my photo. 

 

Thanks!

0 Likes
Astronaut
952 116 219

Yup, you have to make a media query to change the background-position property for whatever you're targeting:

 

@media (max-width: 767px){
.your-class {
background-position: 50% 50%;
}
}

This says anything under 767px, apply this specific position.

 

Documentation on background-position:

 

https://www.w3schools.com/cssref/pr_background-position.asp

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
28 0 0

Thanks for the help!

 

How exactly would i implement this code?

 

Here is the code i had put in to the theme.scss to imlement the background image:

 

{% if settings.use_header_bg %}
body{
background:url({{ settings.bg| img_url: 'master' }}) {% if settings.repeat_header_bg %}repeat{% else %}no-repeat{% endif %};
{% if settings.cover_header_bg %}
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
{% endif %}
}
{% endif %}

0 Likes
Astronaut
952 116 219
{% if settings.use_header_bg %}
body{
background:url({{ settings.bg| img_url: 'master' }}) {% if settings.repeat_header_bg %}repeat{% else %}no-repeat{% endif %};
{% if settings.cover_header_bg %}
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
{% endif %}
}
@media (max-width: 767px){
body {
background-position: 50% 50%;
}
}
{% endif %}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Shopify Partner
28 0 0

To update my question... Since I would need different shaped images for mobile and desktop, i was wondering if its possible to show different background images by pixels.

 

So have one image on mobile say, and a different one on desktop.

 

This code worked perfectly for me getting a background on the store, just would like two separate ones: 

 

body {
background-image:url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/bgbeach.jpg?288');
}

 

 

0 Likes
Astronaut
952 116 219
body {
background-image:url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/bgbeach.jpg?288');
}
@media (max-width: 767px){
background-image: url('/path-to-your-mobile-image.jpg');
background-position: //whatever you want your position.
}

Media queries will overwrite previously defined styles, so you just have to set another image path in your media query for the same element. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like