How can I modify my website header shape using CSS?

Store Design

Topic summary

Goal: change the Shopify store header’s geometric shape to match a styled example by using CSS.

Proposed approach: a CSS snippet sets the desktop header to use a background image and makes the overlay transparent.

  • Uses a media query (min-width: 1170px).
  • Selectors: #shopify-section-header-classic [data-enable_overlay=“true”] .header and header#header.
  • Properties: background-color: transparent; background: url(Add image path); height: 177px; background-repeat: no-repeat; background-size: 100%.
  • Implementation: add CSS in Assets > style.scss.liquid; upload the image to the store and use its URL. A screenshot illustrates where to upload the image.

Issues reported: multiple users say the header remains white even after adding the CSS and a background image URL; one tried placing code in theme.css. The helper requested site URLs for troubleshooting.

Latest update: the original poster confirms it doesn’t work for them and shares a link (jitensha-tokyo-paris.myshopify.com) for review.

Status: unresolved and ongoing; waiting for debugging based on the provided URLs and verifying correct file placement and image path.

Summarized with AI on February 5. AI used: gpt-5.
1

Hello everyone!

Here my website: https://team-muge.myshopify.com/

I would like to modify the geometric shape of my header to have this type of result: https://crossfitmiramas.fr/

Does anyone have an idea how to do this with CSS code?

Thank you so much in advance,

Best regards,

Max COSTA

2

@MaxCosta

@media screen and (min-width: 1170px) {
#shopify-section-header-classic [data-enable_overlay="true"] .header {
    background-color: transparent;
}
header#header {
    background: url(Add image path);
    height: 177px;
    background-repeat: no-repeat;
    background-size: 100%;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

note : Add the image first on your store like this

oscprofessional_0-1654519634172.png
oscprofessional_0-1654519634172.png3156×742 826 KB

3

Hi there,

I’m struggling to understand how this works.

I’ve tried to implement your code into my theme.css around the rest of the header variables, but no matter what URL I add for the image, my header just remains white. Even with the background-colour set to transparent.

4

@dapplestudio ,

Share your issue and URL. I will help you.

5

Hello

It doesn’t work for us too.. this is the link : jitensha-tokyo-paris.myshopify.com

Thank you in advance,

Best regards,