Change Background Image in the Express Theme

Solved
Highlighted
New Member
3 0 0

Hi!

 

I've read several posts about changing the background image for other themes. 

I tried applying the answers to the Express theme but the theme.scss.liquid file is written differently (from Debut's). Anyway, long story short, I was unsuccessful in changing my store's background. Help, anyone?

I inserted this line but it didn't change the site. I already uploaded the tmcf_test_bg.jpg asset in the theme.

background: url({{ 'tmcf_test_bg.jpg' | asset_url }});

0 Likes
Highlighted
Shopify Partner
151 23 31

This is an accepted solution.

@AngeliqueUy Hi!

You can try to use next one code to place a background image for a whole site:

body {
  background: url({{ 'tmcf_test_bg.jpg' | asset_url }});
}

But a background image may require of using additional background CSS rules. Here you can find the reference: https://css-tricks.com/almanac/properties/b/background/

0 Likes
Highlighted
New Member
3 0 0

It worked! 

Thank you so much!!

0 Likes
Highlighted
New Member
1 0 0

Hi Sasha2

Where should the code be inserted?

Thanks in advance

Morgan

0 Likes
Highlighted
Shopify Partner
151 23 31

@MorganH 

Hi Morgan,

The code should be inserted at the end of your theme's CSS file.

To find the CSS file:

1. Click on "Online store" -> Themes -> Actions -> Edit code.

2. Behind of Assets heading find the CSS file. It can be titled "themes.scss.liquid" or "styles.scss.liquid", etc.

0 Likes
Highlighted
New Member
1 0 0

Hello I am on the edit code for the Express theme and still can’t find where to change the code. I don’t see the CSS file you mentioned. Is it located in assets? Thanks so much! 

0 Likes
Highlighted
Shopify Partner
151 23 31

@Terria2020 Hello,

Yes, the CSS files are placed in the Assets folder. The title of the CSS file can be different, but the file extension one of the next ones: "css", "scss", "css.liquid" or "scss.liquid".

0 Likes