Adding a background image to the Supply theme header

Highlighted
New Member
2 0 0

Hello, I have been trying to add a background image to the header on my site (Supply theme) but nothing seems to work, I am not sure if I am not using the right code or if I am simply not placing the code in the appropriate spot.  Any suggestions?

0 Likes
Tourist
3 0 1

Hey Austin,

I got this to work in mine by inserting the following code.  I copied it into the section they have already made for getting an image in the body.  Its around line 1607 or so in the theme.scss.liquid.   

Here's the snippet I used:

/* remove background colour from header */

/* place background image into header */

.site-header {

  background: transparent;

  background-image: url("bg.jpg");

  background-size: 65% 40%;

}

 

Here's my website if you want to see how it looks:

http://lavendercottagejewelry.com

 

There's still a little issue with sizing on the mobile app, but I can live with that until I figure out how to fix that.  

 

Good luck with yours!

Cheryl

1 Like
Tourist
3 0 1

Oh, and one more thing - I had to play around with the 65% and 40% sizes.  The original code had 100% for both, but that didn't work with my image.  

Also, you have to make sure you've uploaded your image as an asset, and use that file name in the code,

0 Likes
New Member
2 0 0

Thanks Cheryl, works like a charm!

Still have some messing around to do with the header and image size values but at least I have a point of reference to go on.

0 Likes
Tourist
3 0 1

Glad to hear it worked for you, too!

0 Likes