Jump to content


This topic is now archived and is closed to further replies.


different background images on different pages

Recommended Posts


My site has a background image that I want to appear on MOST pages. However, I need to display a different background image on a few pages. I am attempting to use the individual page classes to target those pages, but nothing I do will change the background image on the body tag. The following is the code I'm using:


body {background-image: url ('http://www.tfp.box9design.org/images/bg-body02.jpg')!important;background-repeat: repeat;}


In order to target a specific page with a different background image I am using the code:


body .page-id-137 {background-image:url("http://www.b9d.box9design.org/wp-content/images/bg-wood-fence-02.jpg");}


I am able to use the above code to get the background image on the .pl-area-wrap tag, so why not on the body, html or .page tag?


For the time being, I have removed the site-wide background image in Global Options.


the test site is at http://tfp.box9design.org


Any advice/guidance I can get from the forum would be much appreciated.

Share this post

Link to post
Share on other sites



The issue is your first image, wont display on a white background, you will need to use a different color or background image. As it's pretty much transparent, see my image below, the background color is actually a strong green but appear as though it's a pastel color.




To add an image to a specific page, use the following code as a base for your other pages, you will need to replace the page ID in the class.

body.page-id-861 {
background: url(http://www.tfp.box9design.org/images/bg-body02.jpg);

You will also need to remove the white background color from the .site-wrap class, you can do this by adding the following code:

#site.site-wrap {
background: rgba(0, 0, 0, 0);

Also, this image URL you linked give a 404 - http://www.b9d.box9design.org/wp-content/images/bg-wood-fence-02.jpg

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • paoloimperiale
      By paoloimperiale+
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!