0

hopefully you can help. My website: www.chromahouse.com

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.com/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.com/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!

1
  • You can use the "Additional CSS" function and add .section {background-image:url( " chromahouse.com/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 Apr 2 '20 at 7:56
0

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

9
  • So the first code mostly worked, although, I notice that it stretches the image from top to bottom but there are boarders on the sides, (I still see white on the left and right of the background) .. How can I make it so that it stretches the entire background? – Carlos de Varona Apr 2 '20 at 15:56
  • finally, the only other thing I would need is to make it fixed so that when I scroll it stays, and second, darkening it (like some sort of shadowed overlay. (if you look at my homepage that same image is darker, so im trying to copy it to make it look like it does on the center section of my homepage) – Carlos de Varona Apr 2 '20 at 16:05
  • Covering the entire background might be more difficult because your theme will define the space you have to work with. You can add the same code in my answer, with the addition of a new line inside the { } and include backgroud-attachment: fixed; You might be able to override the 'body' element to cover the entire page but you would need to copy the entire body element and add the background image stuff in addition to what is there already. More info (w3schools.com/cssref/pr_background-attachment.asp) look at background-repeat and background-image – Admiral Noisy Bottom Apr 2 '20 at 22:05
  • I have modified my answer. Also, I previously made a typo and the second example was a copy of the first, whereas it should have referred to .container not .section. – Admiral Noisy Bottom Apr 2 '20 at 22:27
  • Thanks for your help: After doing the above, "SECTION" seems to work best although I sitll have the problem where there is still white on the left and right side of the background, whereas when I use container, it does cover the entire background but then causes other issues such as replacing my headers on my home page etc. – Carlos de Varona Apr 2 '20 at 22:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.