Make background images relative to view port

Site URL: https://www.rockpointcommunity.co.uk/

Hi,

im fairly new to web design and CSS but I am starting to get there..

I have a question regarding responsive design.

So I have created background images to use on my site however I am struggling with these not being responsive. I appreciate I will likely not be able to use the same images on a desktop view and mobile view, but I am struggling even with slight viewport changes in desktop mode.

I was wondering how I could upload my bg image and set its dimensions relative to the viewport of the screen?

Any responses will be much appreciated! 
 

Thanks

Hi. You mean Rockpoint Community image?

Add this to Design > Custom CSS

/* resize mobile background */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 50vh;
    margin-top: 20vh;
}
}

Thank you