Fading background

Photoshop and css will help.

https://www.evolutionarydesigns.net/blog/2010/10/27/how-to-fade-an-image-into-the-background-with-adobe-photoshop-cs4/

https://www.colorzilla.com/gradient-editor/

I would position that image at the top using CSS,to manipulate CSS in wordpress you need to either be able to directly edit your CSS in your theme files(however,i would advise against this) or install a custom CSS plugin that can add a “child” stylesheet to your page.

The code to position an image at the top of a page is pretty simple:

body{
background: url(https://yourimagegoeshere.com) center top #000;
}
/*(this tells you to pull the image and position it at the center and top of your body) also,that digit number is a solid background color*/

If you create a “png” semi-transparent image with a fade at the bottom(google “layer mask fade” on how to do this) and place it in that code above it will fade into the solid color you select in your css.

Sweet thank you both. But I know how to do this in photoshop but it is the coding thathas me stuck

If I enter

body{
background: url(https://yourimagegoeshere.com) center top #000;
}

Then I would still need another background on the bottom right?