Changing background image of all pages except Home Page

[Adrianna Lima+ 0]

Hi,

 

  Based on http://forum.pagelines.com/topic/30414-different-background-images-on-different-pages/.

 

  I would like to change all other pages except for the home page.

 

This is my code :

BODY.page.page-id-14.page-template-default.sophistique.pl-pro-version.responsive.full_width.last-imported-singlecolumn.display-full DIV#supersized{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

   Basically if i were to do this method, there are 50 pages which i need to change. Is there another way?

 

regards

[James B 436]

Hi there, the easiest way to do this would be to set the background page site wide to the image you want to use on all the other pages. So then you have that image on every page including the homepage, then using css you can override the homepage to a different image.

 

.home .site-wrap {
background: url(http://www.your-image-url.co.uk);
}

[Adrianna Lima+ 0]

Hi,

 

     The problem with using this is that it is not going to resize the image responsively as i believed pageline is using a jquery method to allow us to check the fixed image that allows responsive background.

 

    Please advise.

 

Regards

[Danny+ 1,327]

Use the following property in your CSS:

 

background-size: cover;

 

You can find more info about cover here - http://www.w3schools.com/cssref/css3_pr_background-size.asp

http://css-tricks.com/perfect-full-page-background-image/

[Adrianna Lima+ 0]

But that is not responsive as i need to set the size. Any other solutions?

[Adrianna Lima+ 0]

Hi there, the easiest way to do this would be to set the background page site wide to the image you want to use on all the other pages. So then you have that image on every page including the homepage, then using css you can override the homepage to a different image.

 

.home .site-wrap {
background: url(http://www.your-image-url.co.uk);
}

ANd this method doesnt seems to work

[James B 436]

Hi there,

 

It's working on my test site, can you zap us a link to the live site so we can take a look.