Adding a background image to the Supply theme header

[Austin_Lytle]

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?

[Cheryl_Van_Dyck]

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

[Cheryl_Van_Dyck]

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,

[Austin_Lytle]

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.

[Cheryl_Van_Dyck]

Glad to hear it worked for you, too!

[Dan46]

Have you tried making you logo image a .png file, so it may lay in there as part of your background? Gorgeous work by the way, some talent there!

[CandyMaze]

Hi There, 

Still having trouble myself doing this!