Full page background image different on each page

[ROBIN]

Hi

I am trying to figure out how to have a different background image on each page.  I have the background image on the page just for reference.  I will need to add image links on top of the picture, that I have showing now, so I know it needs to be a background image.

This is just a mock-up that I am trying to figure out how to make work, so it is a mess.

Here is a link

Testing – Gamerz Dojo

 

Thanks for any help you can give me.

[scrambler]

This should help

Styling specific pages or devices (like BG Image) – Weaver Xtreme Guide

 

[ROBIN]

Ok, I worked my way through this and it worked.

My issue now is the background image is presenting with a lot of the sides of the image being cut off.

The background image is:

Dimensions: 1000 by 567 pixels

And my Theme is set to 1080 width

Do you have any suggestions?

[scrambler]

Your background-size property is set to cover so it scales the image to cover as much as possible.

If you want no cropping set the background-size CSS property to contain

 

[ROBIN]

Thank you!

Do you know why the rest of the areas are now showing white instead of black like is set throughout the rest of the website?

Sorry to be a pain, this is really perplexing.

Thank you!

[scrambler]

Your overall background color appears to be set to white somewhere.

Check the theme setting for it and make sure it is black

 

[ROBIN]

This is so strange. The rest of the site has a black background.

Gamerzdojo.com

I am trying to create a new look, buy creating in the background.  I have checked every background option.  The rest of the site has black everywhere, new pages I create have black everywhere, but when I add this code

{background:url(https://gamerzdojo.com/wp-content/uploads/2025/01/Tournaments-Background-e1737988026489.png) no-repeat center;
background-size:contain;}
#container {
background-color: transparent;}

Everything goes white.   If I don’t have transparent as a background color the black background covers the image.  

Is there an error in the above code, or is there a better way to do it?

Thank you so much

[scrambler]

The white setting is probably in main options > Wrapping areas > Site background color

If you cant find the site background setting, you can add the black in your rule

{background:black url(https://gamerzdojo.com/wp-content/uploads/2025/01/Tournaments-Background-e1737988026489.png) no-repeat center;
background-size:contain;}
#container {
background-color: transparent;}

[Author]

Posts