Stretched banner background images

Working on 7.1 in a section with an existing background image, already set to full bleed and with 36% opacity. I want to change the opacity and background colour, as it all looks far too blue. But as soon as I touch the opacity slider in the background tab of the editor, the image is stretched widthwise out of all recognition. I am not confident with coding, and couldn't find any answers to this issue that didn't use coding. Is the best way to delete the background image and start again, or should I be able to edit it? 

@EmmanuelOxford That definitely sounds like a bug in the system, though not being able to see what you see, it's hard to know for sure. If it is a bug, a possible work around would be to:

• Go into your Site Styles and find the Color Theme of the section you have the background image in.
• Find 'Background Overlay' under the Sitewide section and make it less blue.
• If it's still not the color you want, you can select HSL and modify the opacity.

Keep in mind that it will change that overlay for all sections with it applied, so if you have that effect elsewhere, they will also be impacted. 

Hope this helps! Let us know if it doesn't work and we'll brainstorm further. 

Here's a sample screenshot of what those settings look like:

Thank you, that is so helpful! I have succeeded in changing the background overlay colour on one of our themes from blue to grey and a reduced saturation, which has improved the colour of banner images. However, if I try to change the theme of a page it also stretches the images, so I've exited those pages without saving. Attached screenshot of original and stretched image. 

This is still causing an issue. On this page https://www.emmanueloxford.org/catalyst  I wanted to edit the old banner image. So I chose edit section, chose background, and hit replace. Chose my new file , and the banner has come out like this, and I cannot find out why.  Please can someone help - we need to update several other banner photos too.