Jump to content


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


Adding a unique background to the footer

Recommended Posts

scribblebean    0
Framework Version: 2.1 
WordPress Version: 3.9.1
Screenshots: attached



I would like to add a custom background behind the footer, while having a separate background for the rest of the site. I'd like to add that to the section highlighted in the attachment. How do I do that?


Steps taken: 

I added #footer { background-image: url(YOUR-IMAGE-URL) } In Custom Code -> Custom CSS (per this thread: ) but it doesn't change anything. One comment in that thread mentioned changing the layout template but I don't have more details than that, so I'm not following how to fix the issue.



I'm working on this for a client who uses Pagelines, and I'm not familiar with the framework.


Thanks so much for any help you can offer.

Share this post

Link to post
Share on other sites
greenfly    230

You have posted in the free version of the DMS forum. You say you are using 2.1 - could you confirm this for us 


The CSS you say you used - im assuming the code you added wasnt as follows 

 #footer { background-image: url(YOUR-IMAGE-URL) } 

Could you provide the exact CSS you used please?





If you are using DMS 2 Version 2.1, you can add a a 'canvas area' section to the footer and make sure all the content for the footer is inside the canvas area, you then have the option to set a background for the canvas area and thus the footer. 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites
scribblebean    0

Thanks for the quick reply.


I assumed we have 2.1 because the Pagelines dashboard says we have no new updates, which I suppose I shouldn't have done. Sorry. I looked in Appearance> Themes> Pagelines framework and found it's Version 2.4.5.


I don't know what a canvas area section is or how to add it. Do you mind elaborating, please? 


The actual CSS is 

I put it at the end of the CSS/LESS Rules section with a hard line between it and the last css text.

Share this post

Link to post
Share on other sites
Danny    1,327



You can try the following custom CSS:


body.fixed_width #footer {
background: blue;
max-width: 100%;
If you want to use an image, you will need to edit the CSS above, I also recommend you remove any custom CSS you have related to the footer, as it will likely conflict.
  • Like 1

Please search our forums, before posting!

Share this post

Link to post
Share on other sites
scribblebean    0

SCORE, thank you! That worked.

Share this post

Link to post
Share on other sites
Danny    1,327

No problem.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • Houston Haynes
      By Houston Haynes+
      OK - folks - back with another nit... The "back to top" link works - BUT - it's only active (i.e. clickable with the associated action following) when the mouse-over hovers over the footer area of the page. I did a quick change of the z-depth (to -1) and nothing made a difference. Any thoughts on how to make the *entire* back-to-top icon hover-able/actionable? Thanks!

    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      site of one of the class (pilates)
      site with calendar :
      7 side with one event from the calendar :
      when I have my site on DMS2 it was working :-(
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • 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?