How do I customize Header and Footer after changing background base.css code of whole website?

Store Design
, , , , ,

Topic summary

Issue: After adding a custom background via base.css using a .gradient class, header and footer customizations stopped applying. The added CSS includes several !important declarations (which force styles to take precedence), and the user suspects these global styles are overriding section-specific CSS.

What was changed: .gradient with background: var(–gradient-background); background-attachment: fixed; background-image: url(… ) !important; background-color: transparent !important; background-position: top left !important; background-size: auto !important.

Tried: Adding styles in the section’s Custom CSS for header/footer. These worked before the background change but no longer take effect.

Next steps: A helper requested the store link to investigate; the link was provided (810 c73-5.myshopify.com).

Status: Unresolved and awaiting inspection of the live store. Key question: whether the global .gradient rules (especially with !important) are overriding header/footer styles and how to scope or increase specificity to restore them.

Summarized with AI on January 13. AI used: gpt-5.
1

I changed the code so i can put a custom background for the store accessing the base.css. But now i cant customize the header and footer anymore. When i put in custom code to have the image i want it doesnt respond. My guess is the base.css code overwrites it somehow? But i dont really know, thats why i ask here if there is any custom code that could fix that. I dont really know much about coding so i hope anyone of you could help me. Thanks in advance! If you need anymore information please let me know.

This is the Code i used (from YT):

  1. .gradient {

  2. background: var(–gradient-background);

  3. background-attachment: fixed;

  4. background-image: url(INSERT URL HERE) !important;

  5. background-color: transparent !important;

  6. background-position: top left !important;

  7. background-size: auto !important;

  8. }

2

Hi @joal_whiterider

You can try to add code to Custom CSS of the

Screenshot_7.jpg
Screenshot_7.jpg1895×525 72.3 KB

section that you want to customize.

3

Thank you so much! I already tried that tho. I had custom css for the
header before i put the custom css for my website, but now the custom css
for header and footer dont work anymore.

4

Could you share your store link to check?

5

This is the link to my store: 810c73-5.myshopify.com. Thank you!