Image Banner Bleeds into Header for Homepage Only - Dawn

Store Design
,
1

Hello, I have pulled together some codes so that my image can overlap my header, and when you scroll and switches colors, I only want it to apply to my homepage, but it is being applied to all pages. Any suggestions would be great! I am not a coder, but I did my best to piece together some solutions found on the discussion boards.

Thank you!

The Code I’m Using

.header-wrapper.color-background-1.gradient {
position: absolute;
width: 100%;
background: transparent;
color: #000;
}
.header-wrapper * {
color: #fff;
}

{%if template contains 'index'%} .header-wrapper.gradient{ background:transparent !important; border-bottom:none !important; } .header-wrapper.gradient .header *{ color: #fff !important; } .shopify-section-header-sticky .header-wrapper.gradient{ background:#ffffff!important; } .shopify-section-header-sticky .header-wrapper.gradient .header *{ color: #000!important; } #MainContent{ margin-top:-96px!important; } {%endif%}
2

Hey, @thehumpedzebra

I’m confident one of our Shopify experts would be able to help fix the image bleeding you are encountering on your banner. This could be done at a reasonable price.

Just wanted to share this as an option in case you are unable to find a coding solution in your thread.