Jump to content

Archived

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

allanlove

Different background image on each page

Recommended Posts

allanlove+    1
allanlove

Hi

 

I am building a new site and the client wants to have a different background image on each of the main pages, not just in a section, but applied to the entire page. This used to be easy in the old Pagelines but not so much in the new DMS.

 

I wonder if someone could give me the custom css to use indicating which bits need to be unique for each page and also how I apply that code to the page itself? How do I apply a different class for each page of the site?

 

I only have a very basic understanding of code so please go easy on me!!!

 

Thanks

 

Allan 

 

 

Share this post


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

Hi Allan

 

You can assign images to different pages in DMS using the page id and then your css with the url. Please see this post for the code example. http://forum.pagelines.com/topic/30414-different-background-images-on-different-pages/


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
allanlove+    1
allanlove

Thanks James, that has got my individual pages sorted, but now, if I don't give a page a specific background image I just get a plain white background? Is there anything I can do so that If I don't select a specific image, then the page or post will fall back to a default one?

 

Thanks again

 

Allan 

Share this post


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

Hi there, you can just add the code again without the .page-id and the new image url.

 

For example my test site is full width, so I'm applying the image to site wrap, this would be the code I used for the pages with the custom images, then the fallback image

 

body.page-id-22 .site-wrap{
background: url(" ");
}

body .site-wrap {
    background: url(" ");
}

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
allanlove+    1
allanlove

Excellent! That works a treat, thanks James!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • 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%; } }  
×