Change Background Image in the Express Theme

[AngeliqueUy]

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 }});

[Sasha2 · 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/

[AngeliqueUy]

It worked! 

Thank you so much!!

[MorganH]

Hi Sasha2

Where should the code be inserted?

Thanks in advance

Morgan

[Sasha2]

@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.

[Terria2020]

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! 

[Sasha2]

@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".

[armando00]

Hello @Sasha2 

I would like to do the same on my site with the express theme, but I don't know on which .css file to insert the code, please help.

[Sasha2]

Hello @armando00,

You can just try each one to define the deserved CSS file.

Usually, themes contain several CSS files only. The main one usually called "theme", "main", "styles" or any other title that a developer decided to use for the main CSS file.