[Support request] Feature Image as a Background Image on Static Front Page

[Phil]

Good Morning.

On the front page of warondiabetes.org I’d like to be able to put text on top of the featured image – not above it as it currently is. Would changing the image to a background image do the trick? If so – how do I do that? I just can’t find the settings when I click on the image.

Also, I’d love to have my navigation menu sit at the top of the image – not on top of it. Can you help me?

And, please remember I’m about as dumb as a brick when it comes to technology. I even am missing the all important TV Remote gene!

Thanks in advance for your help.

[Tom]

Hi there,

You would need to add it as a background image.

It seems you’re using Beaver Builder to add the image currently?

Have you tried using the Page Header add-on instead?: https://generatepress.com/knowledgebase/generate-page-header/

Let me know 🙂

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

[Phil]

Tom,

I just did it as a ‘draft’ and it worked well. Just two things:
1. – I have space at the top of the image over the navigation bar and I think the nav bar should be at the top. How do I get rid of the space that used to be the header. My guess is to get rid of it in Beaver Builder.
2. – What should the size of the image be? Right now it’s kind of square for the full screen. I think I need to crop it, but have no clue what the dimensions should be. Can you help?

As always, you help is invaluable. As I’ve gone through the forums, you are always so patient and get back to folks so quickly, which is appreciated more than I can express adequately.

Phil

[Tom]

Hi Phil,

1. I would need to see the space to know for sure – it could be caused by BB, but that’s just a guess.

2. Typically you want to work with the aspect ratio of your area. For a high quality image, the width should be around 1500px, and the height should be whatever the aspect ratio calls for – depends on the height of your area.

For images this large, be sure to optimize them first using a tool like this: http://optimizilla.com/

Thank you! Always happy to help 🙂

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

[Phil]

Tom,

I have no clue what I am doing wrong. The site is warondiabetes.org. I cannot get the image to appear. It was at one time, but not any longer….can you say frustrated?

On the front page I’d like the image with the nav bar at the top – and I was achieving that. Then, I went in and took out all Beaver Builder modules before ‘publishing.’ Now, no image as you can see.

Also, if I take out the site title on the front page, I take it out everywhere – but, I don’t want to do that. The rest of the pages look so clean and good, I want the front page to look that way, as well. Once I get the header fixed, I will rebuild using Beaver Builder. Will that be okay?

Please remember that I am not a techie, so be gentle with your instructions. Love your videos. Bite size information cleanly presented.

Thanks,
Phil

[Tom]

Hi Phil,

So you’re trying to add this background image area with content below your navigation on that page? Have you tried the Page Header add-on?: https://generatepress.com/knowledgebase/generate-page-header/

From what I can see the site title is only hidden on the front page?

Let me know 🙂

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

[Phil]

Tom,

Good eveing, or morning depending on when you read this.

Yes, I have been using the Page Header add-on. I want the nav bar to show at the top with the background being invisible. I was able to get it, but now the image does not show at all. And, I only want it to be that way on the front page. The other pages are okay.

Any help or idea would be appreciated.

[Tom]

It doesn’t look like anything has been added to the page header meta box on the front page. Can I see a screenshot of your meta box settings for that page?

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

[Phil]

Tom,

I would love to send you a screenshot of the page header meta box, but you will need to tell me what that is. Would you give me an example of what to look for?

Thanks,
Phil

[Tom]

This might help: https://generatepress.com/knowledgebase/generate-page-header/

Let me know 🙂

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

[Author]

Posts