Jump to content


Photo
- - - - -

different background images on different pages

background custom css background images

Best Answer Danny , 04 October 2013 - 08:15 AM

HI,

 

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.

 

http://d.pr/i/j2pc

 

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.box9d...od-fence-02.jpg

Go to the full post


  • Please log in to reply
1 reply to this topic

#1 rich_162534

rich_162534

    Member

  • Members
  • 28 posts
  • LocationVictoria, Canada
  • Country: Country Flag

Posted 04 October 2013 - 01:31 AM

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.box9d...s/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.box9d...od-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.


  • Tibag3wv likes this

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15907 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 October 2013 - 08:15 AM   Best Answer

HI,

 

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.

 

http://d.pr/i/j2pc

 

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.box9d...od-fence-02.jpg


  • Tibag3wv likes this





Also tagged with one or more of these keywords: background, custom css, background images