hopefully you can help. My website: www.chromahouse

I am trying to set a full screen background image to a number of specific pages (about 5-6 other pages)

The link to the image I want to use: .png

An example of a page I would like the full screen background image to be on: /

My plan is to remove the featured image you see on the header of these pages and replace it with the background image but in a way that it covers the entire page from header to footer.

Any help is appreciated!

hopefully you can help. My website: www.chromahouse

I am trying to set a full screen background image to a number of specific pages (about 5-6 other pages)

The link to the image I want to use: https://www.chromahouse/wp-content/uploads/2019/07/purpleandblue.png

An example of a page I would like the full screen background image to be on: https://www.chromahouse/about-chroma-house/

My plan is to remove the featured image you see on the header of these pages and replace it with the background image but in a way that it covers the entire page from header to footer.

Any help is appreciated!

• images
• custom-background

• You can use the "Additional CSS" function and add .section {background-image:url( " chromahouse/wp-content/uploads/2019/07/…);}. You have a "section" css element and a "container" element, either would probably do what you want. If this helps you, let me know I'll create a proper answer. – Admiral Noisy Bottom Commented Apr 2, 2020 at 7:56

1 Answer 1

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/wp-content/uploads/2019/07/purpleandblue.png");}

Or

.container {background-image:url("https://www.chromahouse/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/cssref/pr_background-image.asp

For more advanced examples of background elements check this out;

https://www.w3schools/cssref/pr_background-attachment.asp