Background Body image in Supply theme

Solved
Tourist
9 1 2

I would like to add a background image to my site. Supply has instructions in theme.scss.liquid for this but they do not seem to be working:

/*============================================================================
  Commented out CSS for background for easy background image uploading in case customers ask.
  Simply upload a file called 'bg.jpg' and delete lines as necessary.
==============================================================================*/
// body {
  // background: url({{ 'bg.jpg' | asset_url }}) 0 0 repeat scroll;
  // background: url({{ 'bg.jpg' | asset_url }}) 0 0 no-repeat scroll;
  // background: url({{ 'bg.jpg' | asset_url }}) 0 0 repeat fixed;
  // background: url({{ 'bg.jpg' | asset_url }}) 0 0 no-repeat fixed;

  // Fullscreen background
  // @include prefix('background-size', 'cover');
// }
 

I uploaded my background image using the File uploader and made sure it was named bg.jpg. I then un-commented this code in theme.scss.liquid

// background: url({{ 'bg.jpg' | asset_url }}) 0 0 repeat scroll;

Not only does the background image is not show up it breaks the CSS completely. Is there a problem that I am not seeing? The store address is: https://just-great-tees.myshopify.com/

 

Please Help!

 

1 Like

You should add a local css for bg image if it breaks your entire css.

We are a Shopify Partner Company
Built more than 100 Shopify Stores
Connect to me on m.me/firstwire or skype at anand@firstwireapp.com
Check portfolio at https://firstwireapp.com/shopify-services/
0 Likes

Success.

Tourist
9 1 2

So I figured it out on my own!

Hope this helps

THIS IS FOR SUPPLY THEME ONLY

 

First, upload your background image under "Assets.
Don't forget to name it "bg.jpg"

 

Remove the "//" from in front of the "body {".
then
Remove the "//" from in front of one of the following

// background: url({{ 'bg.jpg' | asset_url }}) 0 0 repeat scroll;
// background: url({{ 'bg.jpg' | asset_url }}) 0 0 no-repeat scroll;
// background: url({{ 'bg.jpg' | asset_url }}) 0 0 repeat fixed;
// background: url({{ 'bg.jpg' | asset_url }}) 0 0 no-repeat fixed;

Use the options that "repeat" for a tiled background
Use the options that "no-repeat" for a single image background

Use the options that "scroll" if you want the background to move with everything else on the screen
Use the options that "fixed" if you want the background to move with everything else on the screen

 

SUPPLY_INSTRUCTIONS.png

1 Like
Tourist
9 1 2

..........

0 Likes
New Member
2 0 0

How can I change my current background theme from white, i might want to  put a picture to change to a green color, having a feel of Ramadan

0 Likes
New Member
2 0 0

How can I change my current background theme from white, i might want to  put a picture to change to a green color, having a feel of Ramadan

0 Likes
Explorer
70 3 8
body {
background-color: green;
}

at bottom of css file

0 Likes
New Member
1 0 0

Can I set the transparency of the background image?

0 Likes
Explorer
70 3 8
img {
  opacity: 0.5;
}
1 Like
New Member
1 0 0

How about in Debut Theme?

0 Likes