Issue With Gradient Over Hero Image Not Full Width

Site URL: https://tyleytech.com.au

I've figured out how to overlay a transparent gradient over the hero image. However, there are some problems with it filling the full width and height.

On a desktop browser it doesn't fill the full width and on mobile you can see it doesn't extend to the top of the image beneath the banner when you scroll and it rubber bands/bounces to reveal a hidden part of the image. Hope that makes sense. Examples attached. 

I'm not great with CSS and more of a tinkerer and copy/paster, but here is the CSS I'm using.
 

[data-section-id="6048630b359d1076b84958df"]
.content-wrapper
{width:100%!important;
  background: linear-gradient(320deg, rgba(255, 0, 0, 0.4), rgba(128,0,128,0.4));
  z-index: 1;}

8 hours ago, jameslityley said:

Site URL: https://tyleytech.com.au

I've figured out how to overlay a transparent gradient over the hero image. However, there are some problems with it filling the full width and height.

On a desktop browser it doesn't fill the full width and on mobile you can see it doesn't extend to the top of the image beneath the banner when you scroll and it rubber bands/bounces to reveal a hidden part of the image. Hope that makes sense. Examples attached. 

I'm not great with CSS and more of a tinkerer and copy/paster, but here is the CSS I'm using.
 

[data-section-id="6048630b359d1076b84958df"]
.content-wrapper
{width:100%!important;
  background: linear-gradient(320deg, rgba(255, 0, 0, 0.4), rgba(128,0,128,0.4));
  z-index: 1;}

 

Update max width constraint like so

[data-section-id="6048630b359d1076b84958df"]
.content-wrapper
{
  width:100%!important;
  background: linear-gradient(320deg, rgba(255, 0, 0, 0.4), rgba(128,0,128,0.4));
  z-index: 1;
  max-width: inherit;
}

Thank-you so much for your response!

I replaced my CSS with yours and the gradient now stretches the full width, but not the full height still under the navigation section, which is seen when scrolling. 

The only other trouble is now the text over the image isn't in line with the rest of the text lower on the page. I'll have a bit more of a play with it and see what I can manage myself.

I spent another few hours on it trying to refine it and get it working as it should, but failed. 

It's quite frustrating that this fairly simple feature isn't included in Squrespace, either by changing styles or image editing/filters. Colour and gradient overlays on images are a good quick way to make a hero image look good and increase legibility of text.

In the end I simply edited the image to "bake-in" the colour overlay, went with a duo-tone effect instead of a gradient. It would have been nice to do it "properly" but it just wasn't worth the hassle. 

Thanks for helping out anyway!