Appearance | Customize
Most css styles within your pages can be modified using the “Additional CSS” function found under “Appearance” | “Customize”. Just find the CSS Element you want to override and go ahead and change them.
Changes are easily undone if you mess things up too.
After looking at your page I see you have two possible CSS Elements, either “s “container” or “section”.
Add the following to your CSS Customize;
.section {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}
Or
.container {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}
Note the . at the beginning of the line!
It is good practice to also set a background color incase the image is not available.
You can also configure how the image is displayed, repeated, etc. and set it as fixed or floating.
.container {
max-width: 100%;
background-image:url("/wp-content/uploads/2019/07/purpleandblue.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
};
If you wanted an entire page to have a background image, replace ‘container‘ element with ‘body‘.
It is important to note changes made though the “Additional CSS” option will override existing CSS Styles, therefore any elements related to styles being overridden should be included.
You may need to experiment in order to get the background image the way you want it, for example a screen with very high resolution will stretch the image and perhaps make it look terrible. For larger resolutions screens you need very large images, which consume bandwidth and slow your website down. If you google “seamless backgrounds” you will find smaller images which will create a seamless background image affect when repeated.
For more information check out;
https://www.w3schools.com/cssref/pr_background-image.asp
For more advanced examples of background elements check this out;
https://www.w3schools.com/cssref/pr_background-attachment.asp