How to Replace Header Background with Image

Technical Q&A
1

I currently operate an online shop using the paid-for theme Impulse version 2.3.0.

I’m trying to replace the background color of my header with a landscape image.

I inserted this code at the bottom of the theme.scss.liquid asset:

.site-header {
 background-image:url({{ 'image.jpg' | asset_url }});
}
#StickyBar {
background-image:url({{ 'image.jpg' | asset_url }});
}
#shopify-section-footer {
background-image:url({{ 'image.jpg' | asset_url }});
}

However, when I saved and published the code the .jpeg file link I pasted from my Shopify files failed to appear. Currently it’s still a one-color header.

How can I change the header to be an image instead of a color?

Thank you and all replies are greatly appreciated.

2

Hi @Athoritos , do you have theme.css.liquid file instead od theme.scss.liquid?

3

Just checked. No theme.css.liquid only .scss

4

Just noticed a “SCSS is deprecated in themes. Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.” Is this why the header image isn’t appearing?

5

Probably. It would be best to convert those files. That’s why I asked :slightly_smiling_face:

note: when you convert that file, call it theme.css.liquid

6

How does one convert scss to css? Is that the entire theme? Or just the .liquid in question?

1 Like
7

@Athoritos

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

8

https://www.shadebands.co

1 Like
9

Hi @Athoritos , go to edit code > sections > header.liquid, and find this element


Replace it with:

```markup
10

@Athoritos

can you please send image cdn so i will set