Hero Heading Background Image not sharp

[mikefrisbee]

I want an image across the top of the page, but every way I try it, the image appears unsharp, despite the original being pin sharp and optimised for web.

I’ve tried doing it with Swift Page Builder adding an image across the top, then adding an image banner, but that doesn’t go across the width of the whole page, which is how I want it. Then I tried Hero Heading Background Image.

The image itself is 2000 px x 616 px, so is plenty big enough. I’ve attached the original image.

Here’s a test page to help you get an idea: https://www.mrsfrisbeesallnaturals.co.uk/image-banner-test/

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

We will need admin credentials.

-Rui

[mikefrisbee]

This reply has been marked as private.

[David Martin – Support]

It looks decent for me, what plugin is adding this:

The theme does not add that, please test without it.

[mikefrisbee]

That’s strange – when I go back to the page, the code has disappeared! However, the image still appears when you view the page. See attachments. Why – and how – has that happened? I’ve seen it on other pages as well.

What is the best (default) way to add an image across the top of the page? Is it purely by using the Swift Page Builder / Add Element / Image? If so, what size should it be?

Even when I tried one that was 4000 px long, the proportions were stretched, which made the embedded text (within the image itself, using Photoshop) look out of focus.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You should not add text to the image itself, text should be overlayed using HTML. The image is set to fill the container it resides in so the width x height is drynamic.

Yes, you can use the Swift Slider/Slider Revolution or the Meta Options within a Page to set a Hero image.