Jump to content

Archived

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

Adrianna Lima

Changing background image of all pages except Home Page

Recommended Posts

Adrianna Lima+    0
Adrianna Lima

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

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

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

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

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

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

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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?
    • jacobtippett
      By jacobtippett+
      Hi,
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
    • martinjrob
      By martinjrob+
      I am having problems in figuring out how to make the sections transparent so it shows 1 background color, Image.
      I have made all sections with no background colour as it suggests in pagelines docs
      this is the domain name http://www.socialwebservice.co.uk/ and this is how i would like it to look http://ecologysurveysinnorfolk.co.uk/
       
      Any help will be much appreciated. 
    • abuzzelli
      By abuzzelli+
      Trying to adjust the position of the background image on http://churchofwolves.com/. I need the wolf background to move over to the left on mobile versions so it can be seen. Here's the code I'm using and it's not working. I've tried a bunch of different things. Getting frustrated. Any advice?
      @media (max-width: 768px) { .home .site-wrap{ background: url(http://churchofwolves.com/wp-content/uploads/2015/06/Church-of-Wolves-bkgd1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 100% 0%; } }  
    • zetanet
      By zetanet+
      I can insert three text box in a page, of course.
      I'm not able to set three different background colors to each text box.
      I would like a result as the attached picture.
      How do I do this?

×