How to add header image to brooklyn theme?

Store Design
, ,
1

I am trying to add a background image to my header. I am using the Brooklyn theme.

Please help, thank you!

2

Hi @William46

If you want to change the image from the admin, then Have to create schema for this.

Then using css have to set the design.

3

Hi @William46

You can add this CSS code to theme.liquid file before tag in Online store > Themes > Edit code
4

Hi Dan,

Thanks for your reply! It didn’t work.

5

Hi @William46

Cold you show me the code that you added?

6

Hi Laddisahsi, thanks for your reply!

7

Hi Dan,

Here it is.

Screenshot 2023-09-18 164115.jpg
Screenshot 2023-09-18 164115.jpg1510Ă—676 68.5 KB

8

Your code missing . before “header-wrapper”, please correct it to make it works

9

Hi Dan, thanks for the reply. It doesn’t work with the “.”

10

Please share your page and the code you added to check

11

https://shop.smu.edu.sg/

.header-wrapper { background: url("[https://cdn.shopify.com/s/files/1/0550/0620/0008/files/citiscape_header.jpg?v=1695025660](https://cdn.shopify.com/s/files/1/0550/0620/0008/files/citiscape_header.jpg?v=1695025660)") !important; }
12

Please update code like this

header.site-header { background: url("[https://cdn.shopify.com/s/files/1/0550/0620/0008/files/citiscape_header.jpg?v=1695025660](https://cdn.shopify.com/s/files/1/0550/0620/0008/files/citiscape_header.jpg?v=1695025660)") !important; }

You also can change position of image by following this

https://www.w3schools.com/cssref/pr_background-position.php

13

Thank you, sir! It works!

1 Like
14

Happy I could help.