Adding a background image to the Supply theme header

Austin_Lytle
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
Cheryl_Van_Dyck
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

Cheryl_Van_Dyck
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
Austin_Lytle
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
Cheryl_Van_Dyck
Tourist
3 0 1

Glad to hear it worked for you, too!

0 Likes
Dan46
Excursionist
29 0 12

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!

 

 

 

0 Likes
CandyMaze
New Member
1 0 0

Hi There, 

 

Still having trouble myself doing this! 

0 Likes