How can I change header & footer background to an image on focal theme

Store Design
, , , ,
1

I am trying to change the background of my header and footer to an image that I’ve uploaded, I have searched a few places to try and work it out but nothing seems to work.

I am using the Focal theme.

If someone could help me it would be much appreciated.

Thank you,

Themba

1 Like
2

Hi @LFS2023

You can use this sample code and change into the exact selector and url of the image youll like to use.

.header {
background-image: url('path/to/your/new-image.jpg');
}
.footer {
background-image: url('path/to/your/new-image.jpg');
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Wow thank you so much, It worked. One problem I’m having with it is that I cannot make it transparent until you hover over it? How would you suggest doing this?

Thank you again.

1 Like
4

You can take out the background of the hover.

Ex.

.header:hover {
background: none;

}

I can help more farther if I can check tthe store.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!