How can I place a background image in AgentPress2

[aspectssp]

Hi everyone
I am trying to place a background image in my AgentPress 2 site. http://www.villahols.com

I've gone to Appearance>Customise>Background image

and placed image size 1750 x 1164. It looks OK on my screen but I would like to know what the correct/recommended/optimal size is for the background image.

Also, this image is 185kb. Is this too big?

Also, is it possible to have one background image for the home page, another for listings, another for posts and another for pages?

Any help on this would be appreciated.

http://www.villahols.com

[frobn]

Your image does not cover a larger monitor

Add to your style.css
body {background-size: cover;}

if you want to change images for different pages don't use Customizer. You can add a background images in style.css body and select pages.

Example:

body
{
  background-image: url("images/your-image.jpg");
  background-color: #00077b;
  background-clip: border-box;
  background-origin: padding-box;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

To add to your listing page:

.post-type-archive-listing
{  background-image: url("images/your-image.jpg"); }

[aspectssp]

Thanks for that frobn. I have added the
body {background-size: cover;}
to style.css

Would really appreciate if you, or someone, could check it out on a wide screen monitor and see if the background image is now covering the whole screen.

Am not sure about the second bit though - not much of an expert in coding!

Presumably all this:

body
{
background-image: url("http://villahols.com/wp-content/uploads/2012/05/LaGuardiaPark_Villa_Pool_5423w-600x398.jpg");
background-color: #00077b;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

goes in the BODY section of the style.css file?? I have just put the url of a random image in this example. I would use a bigger image usually.

Do I leave the this
body {background-size: cover;}
there as well? to ensure the images cover the whole screen?

But my real struggle is where to put this:
.post-type-archive-listing
{ background-image: url("images/your-image.jpg"); }

and would this image url be for a different image to the one in the body section??

Any more help appreciated, and thanks for the info so far.

[frobn]

The front page image covers completely on my 23" monitor.

I made error in leaving out a step for images on inner pages. Add them to the body css selector followed by the background-image for each page that you want a different image on. Put the code at the bottom of your style.css.

Example

body,
.post-type-archive-listing
{
background-image: url(“http://villahols.com/wp-content/uploads/2012/05/LaGuardiaPark_Villa_Pool_5423w-600?—398.jpg”);
background-color: #00077b;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

Now change the image for the listing page

.post-type-archive-listing
{  background-image: url("images/your-image-for-this-page.jpg"); }

Use an image optimizer plugin like EWWW

[Author]

Posts