Different image to the background for mobile using on Global Page Header

[Milos]

Hi there.
I applied successfully a different image to the background for mobile using the simple CSS with your code from another thread by my Home page and my Über mich (About) page with Merged Site Header. Unfortunately I could not adapt this code for Global Page Header on my Blog page and so I can not use a different image for mobile there. Could you give me an advice please?

By the background images for mobile I lost the origin color for Header Title H1 and H2 #71535c brown. How can I get them back?

My website:

Thanks.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Milos]

Hi there,

I already sent you a link to my website two days ago..

[Leo]

Sorry we don’t get a notification when a link is added. Please comment here again next time when it’s added 🙂

The CSS you are using should work for every page.

How are you adding it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Milos]

I see..I will do that next time 🙂

I added in Elements/Global page header/Element Classes field “mobile-hero image” and then I copied your CSS code in Sites/Blog/Simple CSS metabox down with my image url inside:
`@media (max-width: 768px) {
.mobile-hero-image {
background-image: url(‘full_url_to_the_mobile_image’) !important;
}
}

[Leo]

Instead of adding that CSS in the simple CSS metabox, try adding it in the global simple CSS editor in the dashboard so it will apply to every page.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Milos]

Yes that works. But I would like to use an another picture for the blog and I will lost the possibility to do that when I add that CSS in the global simple CSS instead in the simple CSS metabox..

[Leo]

Try this CSS in the global simple CSS editor (as the metabox doesn’t work on blog page):

@media (max-width: 768px) {
    body.blog .page-hero.mobile-hero-image {
        background-image: url(https://BLOG-MOBILE-BACKGROUND-IMAGE;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Milos]

After I completed your CSS code with close bracket behind the image URL it works fine 🙂
Thank you so much!

I still have the problem with the title color by all mobile background images..as I wrote few days ago:By the background images for mobile I lost the origin color for Header Title H1 and H2 #71535c brown. How can I get them back?

[Leo]

I’m not seeing a topic for the other question.

Can you open one if you haven’t already done so?

I’ll mark this one as resolved.

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Milos]

Thanks 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts