Jump to content


Photo
- - - - -

Changing background image of all pages except Home Page

BACKGROUND

  • Please log in to reply
6 replies to this topic

#1 Adrianna Lima

Adrianna Lima

    Advanced Member

  • Members

  • 54 posts
  • Country: Country Flag

Posted 11 December 2013 - 03:43 PM

Hi,

 

  Based on http://forum.pagelin...ifferent-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



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 December 2013 - 07:19 AM

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);
}



#3 Adrianna Lima

Adrianna Lima

    Advanced Member

  • Members

  • 54 posts
  • Country: Country Flag

Posted 12 December 2013 - 07:27 AM

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



#4 Danny

Danny

    Is Awesome!

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

Posted 12 December 2013 - 01:26 PM

Use the following property in your CSS:

 

background-size: cover;

 

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

http://css-tricks.co...ckground-image/



#5 Adrianna Lima

Adrianna Lima

    Advanced Member

  • Members

  • 54 posts
  • Country: Country Flag

Posted 14 December 2013 - 03:33 AM

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


Edited by Adrianna Lima, 14 December 2013 - 03:33 AM.


#6 Adrianna Lima

Adrianna Lima

    Advanced Member

  • Members

  • 54 posts
  • Country: Country Flag

Posted 14 December 2013 - 03:46 AM

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



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 December 2013 - 08:24 AM

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.







Also tagged with one or more of these keywords: BACKGROUND