Full screen background Image

[Nicole Miller]

Hello I am trying to add a background image to the body of my pages but I am finding that it only works in boxed layout, is there any way to make the background image full screen?
What size should the image be?
Also is there any way to have more than one background image for different pages?
Thank you

[Zex]

Hello, Nicole!

That option, you mentioned, is for the whole site background, not for the page.
If you want to set the different background image for each page separately, it’s a little bit tricky but possible…

First, you need to find the specific page ID number on the page which you want to apply the
background image.

So, please follow the steps below to discover the page id:

1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

You can check THIS video guide

then, Open the Customizing->General->Additional CSS
and add the code below:

.page-id-8 #page{
background: url(https://static.pexels.com/photos/628236/pexels-photo-628236.jpeg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Replace your page ID and link to the image, for every page you want to change the background image.

for the homepage:

.home  #page{
background: url(https://static.pexels.com/photos/635261/pexels-photo-635261.jpeg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

for the blog page:

.blog  #page{
background: url(https://static.pexels.com/photos/635261/pexels-photo-635261.jpeg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

https://prnt.sc/h5pk2g

Best Regards

[Nicole Miller]

Thank you so much!
This is what I have and it’s not working
/*
.page-id-627 #page{
background: url(http://nbrmdesigns.com/wp-content/uploads/2017/10/rock-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

*/

Residential

I’m not sure what I’m doing wrong. Thanks for your help

[Zex]

Hi, Nicolle!

First…
you need to remove the star-slash sign on top and the end of the code.

next, you need to find the exact page -id

(for the page, you linked above, page-id is 367, not the 627.)

Your code should look like this:

.page-id-367 #page{
background: url(https://nbrmdesigns.com/wp-content/uploads/2017/10/rock-texture.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Please, check the screens:

https://prnt.sc/h5v2dp
https://prnt.sc/h5v2t5

Best Regards

[Nicole Miller]

I checked my page id on a different computer and it gave me the 627 … weird.
I made the changes and its still not working? http://nbrmdesigns.com/new-residences/
Thanks for your help.

[Zex]

Hi,

there was some problem in the path to the picture.

I inserted this path:http://nbrmdesigns.com/wp-content/uploads/2017/10/rock-texture.jpgto the code and now everything look ok.
https://prnt.sc/h5wuwb

So, again, check the path in the code, or copy/paste the above path into code.

This is the code that works for me:

.page-id-367 #page{
        
   background:url(https://nbrmdesigns.com/wp-content/uploads/2017/10/rock-texture.jpg) no-repeat 
   center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Regards

[Nicole Miller]

This path is exactly the same as the one I used. So I just copied and pasted yours and it still does not work.

[Zex]

this path work for me.(removed “s” from https)

http://nbrmdesigns.com/wp-content/uploads/2017/10/rock-texture.jpg

These are the id numbers of your pages:

https://prnt.sc/h5x24d

https://prnt.sc/h5x2h7

https://prnt.sc/h5x2rx

https://prnt.sc/h5x3e5

https://prnt.sc/h5x40w

Regards

[Nicole Miller]

Ok thank you it worked!! The s was in the original code that you gave me above and I was comparing everything to that and then I didn’t see the s because I had been looking at it for so long.
Thank you for your help and patience.
Have a good day.

[osinnreich]

HI there,

I cannot set up my background image. I have tried the CSS code but it still doesn’t work.
.page-id-814{
background: url(http://theunderdog.marketing/wp-content/uploads/2018/01/Brick-wall-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Thank you for your response!
Olga

[Zex]

Hello, Olga!
As I can see you missed a part of the code.

Probably your code should look like this:

.page-id-814 #page{
background: url(https://theunderdog.marketing/wp-content/uploads/2018/01/Brick-wall-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Can you post the link to the page where you want to appear the background image?

Regards

[osinnreich]

Your magic worked 😀 thank you so much!

[Author]

Posts