Community Forums › Forums › Archived Forums › Design Tips and Tricks › How can I place a background image in AgentPress2
Tagged: AgentPress2, Appearance, background image
- This topic has 3 replies, 2 voices, and was last updated 9 years, 2 months ago by frobn.
-
AuthorPosts
-
August 25, 2015 at 7:40 am #163421aspectsspParticipant
Hi everyone
I am trying to place a background image in my AgentPress 2 site. http://www.villahols.comI'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.comAugust 25, 2015 at 9:01 am #163435frobnMemberYour 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"); }
August 25, 2015 at 1:10 pm #163464aspectsspParticipantThanks for that frobn. I have added the
body {background-size: cover;}
to style.cssWould 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.
August 25, 2015 at 2:54 pm #163490frobnMemberThe 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"); }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.