Background image problems

Having issues with my background image.

I’d like it to be full size on any screen size, any browser, mobile etc. but having difficulty achieving that along with a fixed width centre panel of 970px.

First, I can’t seem to get the image to go full screen even with 2000px width etc.

Second, currently my design has a very pale centre panel so that there isn’t a problem with the content showing up against it. If my background image is scaleable I guess this will mess up the centre panel. Is there a way of setting it so any content will always show up strongly so I don’t have to do this pale centre panel? Although my current centre panel has transparency I don’t mind making this opaque.

And finally, can I ensure that my images which are positioned just outside the centre panel are always in that position, just outside the 970px fixed width area? For example like the tennis players here: https://www.atpworldtour.com/ No matter what computer/display setting I view from they are always in the same place.

My site is https://www.joe-music.net/

The code I currently have in theme css is

body {
color: #000000;
text-shadow: white 0px 1px;
background-color: #d8d8d8;
background-image: url(https://myurl.jpg);

background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;}