Change Background Image in the Express Theme

Solved
AngeliqueUy
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
Sasha2
Shopify Partner
166 23 36

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
AngeliqueUy
New Member
3 0 0

It worked! 

Thank you so much!!

0 Likes
MorganH
New Member
1 0 0

Hi Sasha2

Where should the code be inserted?

Thanks in advance

Morgan

0 Likes
Sasha2
Shopify Partner
166 23 36

@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
Terria2020
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
Sasha2
Shopify Partner
166 23 36

@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
armando00
New Member
1 0 0

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.

0 Likes
Sasha2
Shopify Partner
166 23 36

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.

0 Likes