Jump to content

Issue With Gradient Over Hero Image Not Full Width

Recommended Posts

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;}

 

Desktop.png

Mobile.png

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply
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;}

 

Desktop.png

Mobile.png

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;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.

Link to comment

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! 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.