Callan Posted July 22, 2023 Share Posted July 22, 2023 I want to create a background gradient from bottom of the first section on a page through the header. I can get a gradient through the first section using: <style> .fluid-engine { background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40); } </style> but this stops at the header. How can I get a consistent gradient from bottom left of the first section through to top right of the header? Password for my site is: Callan Link to comment
Callan Posted July 22, 2023 Author Share Posted July 22, 2023 Correction. The CSS for a gradient on just the first section of the home page is: <style>.fe-64bb3cc5c329b51a58554d1f {background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40);}</style> Link to comment
tuanphan Posted July 23, 2023 Share Posted July 23, 2023 Did you solve or still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Callan Posted July 24, 2023 Author Share Posted July 24, 2023 Hi, no I haven't figured this out yet. Link to comment
tuanphan Posted July 25, 2023 Share Posted July 25, 2023 21 hours ago, Callan said: Hi, no I haven't figured this out yet. What is site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Callan Posted July 27, 2023 Author Share Posted July 27, 2023 It's: https://rhubarb-plum-w4g9.squarespace.com/ p/w: Callan Link to comment
tuanphan Posted July 28, 2023 Share Posted July 28, 2023 Try this code <style> article section:first-child { padding-top: 0px !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Callan Posted July 30, 2023 Author Share Posted July 30, 2023 Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. Link to comment
tuanphan Posted July 31, 2023 Share Posted July 31, 2023 On 7/30/2023 at 7:18 AM, Callan said: Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. You mean this bottom and this top? Callan 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Callan Posted July 31, 2023 Author Share Posted July 31, 2023 Yes, those images are correct. I need the gradient to go from top to bottom of the section and header. Link to comment
Solution tuanphan Posted August 1, 2023 Solution Share Posted August 1, 2023 Use this code <style> article section:first-child .section-background { background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40) !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Callan Posted August 3, 2023 Author Share Posted August 3, 2023 On 8/1/2023 at 9:27 PM, tuanphan said: <style> article section:first-child .section-background { background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40) !important; } </style> That worked, thank you. Appreciate your help! tuanphan 1 Link to comment
HOMENCREATIVE Posted February 5 Share Posted February 5 @tuanphan I have a similar issue and can't seem to figure out to fix it! I have a gradient header, and made the opacity 100% for the 1st section background. But I want to get ride of the weird line showing between header and section #1. Any idea? Website : www.cafe-club.squarespace.com password: cafeclub Link to comment
tuanphan Posted February 7 Share Posted February 7 On 2/6/2024 at 4:15 AM, HOMENCREATIVE said: @tuanphan I have a similar issue and can't seem to figure out to fix it! I have a gradient header, and made the opacity 100% for the 1st section background. But I want to get ride of the weird line showing between header and section #1. Any idea? Website : www.cafe-club.squarespace.com password: cafeclub You can use this CSS code .header-dropshadow { box-shadow: unset !important; } HOMENCREATIVE 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HOMENCREATIVE Posted February 7 Share Posted February 7 @tuanphan works perfect, thanks kindly! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment