Does anyone know how I can put the header background with a gradient? If possible talk to me with Header and Footer. I would really appreciate it, I’ve tried several ways and none of them worked.
If you want to see the website: www.colorluzes.com.br
Topic summary
A user seeks guidance on implementing gradient backgrounds for both header and footer elements on their website, having attempted multiple unsuccessful approaches.
Solution Provided:
A respondent offers step-by-step CSS implementation:
- Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
- Locate the theme.css file under Assets
- Add CSS code at the bottom using
linear-gradient()property
Technical Details:
The solution includes CSS snippets targeting specific elements (header, footer, navigation bar) with background-image: linear-gradient() declarations. The gradient uses directional parameters (“to right top”) and multiple color stops with hex values. The !important flag is applied to ensure style precedence.
Note: The provided code snippets appear partially corrupted or encoded in the original text, which may affect implementation accuracy. A reference to an external color palette website (www.colorluzes.com.br) is mentioned for additional resources.
1 Like
Hello there,
-
In your Shopify Admin go to online store > themes > actions > edit code
-
Find Asset >theme.css and paste this at the bottom of the file:
header.header.header--inline.header--search-expanded {
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
nav.nav-bar {
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
footer.footer {
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)!important;
}
1 Like