How can I successfully add a background image to my menu header?

Solved

How can I successfully add a background image to my menu header?

ChezGregoire
Tourist
4 0 1

Hi, 

I try to add an image on my header section,  I succeed doing it on other sections of the page but doesn't word on the header one.

 

My website is : https://222a7a-2.myshopify.com/

 

I already tried this solution I rode on another post :
The problem is I do not have a base.css file, I created one but didn't changed anything.

Thank you by advance for your kind help !

 

sticky-header.header-wrapper.color-inverse.gradient.header-wrapper--border-bottom {
background-image: url('https://cdn.shopify.com/s/files/1/0790/8592/8794/files/Capture_d_ecran_2023-12-30_a_16.10.37.png?v=1...') !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Accepted Solution (1)

HFMunir
Shopify Partner
16 5 1

This is an accepted solution.

Hi, You have a file section-header.css 

- open the file and find this '.header-container' and replace the background: property with 

background-image: url('https://cdn.shopify.com/s/files/1/0790/8592/8794/files/Capture_d_ecran_2023-12-30_a_16.10.37.png?v=1703949379');

//it will look like this
.header-container {
    border-bottom: 1px solid var(--color-borders-header);
    background-image: URL('https://cdn.shopify.com/s/files/1/0790/8592/8794/files/Capture_d_ecran_2023-12-30_a_16.10.37.png?v=1703949379');
    position: relative;
    font-size: calc(16px / 16 * var(--base-menu-size) + 0px);
    font-weight: var(--font-weight-menu);
}

 

HFMunir_0-1704017472066.png

 

View solution in original post

Replies 3 (3)

HFMunir
Shopify Partner
16 5 1

This is an accepted solution.

Hi, You have a file section-header.css 

- open the file and find this '.header-container' and replace the background: property with 

background-image: url('https://cdn.shopify.com/s/files/1/0790/8592/8794/files/Capture_d_ecran_2023-12-30_a_16.10.37.png?v=1703949379');

//it will look like this
.header-container {
    border-bottom: 1px solid var(--color-borders-header);
    background-image: URL('https://cdn.shopify.com/s/files/1/0790/8592/8794/files/Capture_d_ecran_2023-12-30_a_16.10.37.png?v=1703949379');
    position: relative;
    font-size: calc(16px / 16 * var(--base-menu-size) + 0px);
    font-weight: var(--font-weight-menu);
}

 

HFMunir_0-1704017472066.png

 

ChezGregoire
Tourist
4 0 1

Thank you so much you are my hero ! 

Have a nice day

 

HFMunir
Shopify Partner
16 5 1

You are welcome 🙂