Site logo

Archived topic

Service Site Template - pixelated header background image

5 replies · Started by Andrea on June 29, 2020

Viewing posts 1–6 of 6

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

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?

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

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 :)

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

No problem! :)

This archived topic is closed to new replies.