[Resolved] specifying a background image at different device break points

[sdanbu]

In GP is there a way to specify a different background image at different device break points?

I would like to at least do this for headers, but perhaps for other images as well.

https://generatepress.com/forums/topic/responsive-background-in-row/#post-307012

[Tom]

Best to use CSS media queries for this.

For example:

@media (max-width: 768px) {
    .my-element {
        background-image: url('URL TO MY MOBILE BACKGROUND');
    }
}

Let me know if you need to know the element classes for specific elements 🙂

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

[sdanbu]

Thanks – I don’t know how to code – I think I probably need the element classes for the images that are used in page header and also for images used in generate.sections I think.

[Tom]

For the Page Header, I gave you the selector/CSS in your other topic.

For sections, you would do this:

@media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
        background-image: url( 'MOBILE IMAGE URL' );
    }
}

You would change #generate-section-1 to the corresponding number for your section. So if it’s the fifth section, you would do this: #generate-section-5

Hope this helps 🙂

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

[Author]

Posts