specifying a background image at different device break points

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 :)

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.

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 :)