Service Site Template – pixelated header background image

[Andrea]

Hello,

I am using the Service Site Template and absolutely thrilled at my first site using no training wheels! On the site demo here: https://generatepress.com/site-library/ and on my site the bottom edge of global header element background image is pixelated. Is there a way to fix this?

Thank you!
Andrea

[Tom]

Hi there,

Interesting – nice find!

It looks like setting the two stop positions in the gradient option can cause this.

Ideally, we need to allow decimal points in the stop position, so the first could be 50% and the second could be 50.2% for example.

Right now, it’s only possible to do 50% and 51%, which will likely blur the line too much.

If you’d like to link me to the page, I can supply some CSS that will fix it for now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andrea]

Hi Tom,

Ah. Interesting!

Yes, I can link you to the page – I supplied the staging URL in my initial post. Do you want an admin login? This is my first support request so not sure how you all do this and I’m not seeing any way to make additional replies private.

Thank you!
Andrea

[Tom]

Give this CSS a shot:

.gb-container.gb-container-bcff56c8 {
    background-image: linear-gradient(184deg, rgba(255, 255, 255, 0) 50%, #ffffff 50.2%);
}

In GB 1.1 you’ll be able to set that .2% in the editor and remove the CSS 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andrea]

You’re the best, Tom. 50.4% was the magic number – very sharp edge now. Thanks again!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts