[Resolved] transparent section so page header is visible; not on mobil devices

[Yannick]

Hi,
I’m redoing my page right now and try to reduce pages build with Elementor but it seems like I need some help to fulfill my wishes… 😀

This is my old About-Page: http://amuddyroad.com/index.php/about-us/

This is my new Test-Version: http://amuddyroad.com/index.php/slider-test/

I have now the background image in the page header. I would like to have the first section with the quote transparent so I can see the background image slightly through the section, like on the old page. Is this possible?
I tried:
.quote {
background-color: rgba(0, 0, 0, 0.5) !important;
}
but it seems like the page header is in a complete other layer?

On mobile devices the fullscreen background image gets cropped and in this case this is not wished (else our faces are not visible anymore). My favorite solution would be: the background image fullscreen on desktop and fitting on mobile devices, is this somehow possible?
If this is not possible I would like to remove the page header on mobile devices. My attempts failed, I tried things like:

@media (max-width: 768px) {
.aboutpic {
display: none !important;
}
}

Best wishes
Yannick

[Leo]

Hi there,

I think you can achieve that by having the quote as page header content, position it to the bottom with CSS, then giving it a background color.

Background images aren’t responsive by nature. What we can do is to switch out a picture specifically for mobile if that helps:

@media (max-width: 768px) {
    .generate-content-header {
        background-image: url(http:/MOBILE-BACKGROUND-URL);
    }
}

[Michael]

Hi Leo

So I just go in to css and paste the code in it?

[Michael]

Hi.
Did you switched out for me already?
Because my background image header is gone.
I thank you if you did.
1. How do I change background color?
2. How do I overlay the background header color with an image?

[Leo]

No I didn’t switch it out for you. We don’t log into your website unless it’s necessary and never make changes for you – we just guide you through.

You would use one of these methods here for CSS: https://docs.generatepress.com/article/adding-css/

Then replace http:/MOBILE-BACKGROUND-URL to the actual image URL.

[Michael]

Can I use smiple css and paste your code?
http:/MOBILE-BACKGROUND-URL to the actual image URL.

[Leo]

Yup that would be my recommendation 🙂

[Michael]

Thanks.

Would you able to assist with the other topic.
Enable mobile header.
I’m having trouble inserting logo icon and it doesn’t display.
Hat should I do?

[Leo]

This one?

Can you add the link to your site using the video instruction and make sure it’s not under coming soon page?

[Michael]

Hi Leo

I’ll follow the video.
And probably useloom myself.
If it doesn’t work I’ll give you
Admin access.
I can’t turn coming soon page until I built the site.

[Michael]

Sorry what video instruction are you referring too?
Useloom? Or video instruction from your site to show how to enable mobile header. If so, where is it in website?

[Leo]

Here is the link: https://generatepress.com/forums/topic/phone-tablet-header-footer-issues/#post-485693

[Michael]

Thanks

[Leo]

No problem.

[Author]

Posts