can't get background image to show in morefoot or footer area

5 posts in this topic



I'm trying to recreate an existing site to the pagelines framework. I would like to add a background image to either the morefoot area or the footer area, but nothing works with whatever CSS I try. For now I have been adding it to the Custom CSS area. I am using firebug but I can't seem to get the right CSS levels.


This is the background image I want to add:


This is the URL of my test site.


I'd appreciate any direction.





Share this post

Link to post
Share on other sites

Hi antonella

You can try for footer area with



#footer {background-image: 


Share this post

Link to post
Share on other sites

Hi, thanks for the quick reply. I did try that before and again but it still doesn't work.

Share this post

Link to post
Share on other sites

Please try in

Pagelines > Layout editor > Site Design Mode


Full-Width Sections

Share this post

Link to post
Share on other sites



Thanks - that got me closer. I ended up selecting the Layout Mode for Static with Pixel Width option and then applied the following code:


body.fixed_width #footer {
  background-image: url('http://......./footer_bg.jpg');
    margin: 0 auto;

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Stange footer issue
      By abuzzelli+
      I'm having an issue with a site I'm working on. The widgets in the footer area are showing up wrong on the home page, but look right on the rest of the pages. I tried deactivating plugins that might be causing the issue, but can't figure it out. Any ideas?

    • Can I remove the play button that appears on canvas area background images on mobile?
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • Make page background fill whole screen
      By jeomiland+
      Have a couple clients who are having background image issues. This should be a basic question so hope fix is easy. How do you get a specified image to auto resize so it fills the browser screen? Client has portrait-format image that's 1000x1000 and the left and right are displaying the background color (white) on my 1440 wide Macbook pro, as it is on client's computer. She has tried clicking "Fit image to page" and repeat background - neither is getting what she expects.  I suggested trying a landscape-format image.
      But the larger question is this - how does one plan a proper background image that will fill the whole screen - left to right - in the browser image and have it scale appropriately?  Should one always have landscape background images? What about scrolling vs not scrolling BG? How plan your BG image so it will fill the screen on laptops, ipads, iphones...  both in landscape and portrait format? Is it true that you can't do it? that either the left-right or top-bottom are cut off depending on the device and orientation?
      2 sites where this needs resolution:
    • Footer on Posts & Category's not displaying correctly
      By ccimala1+
      Hello, first time posting in the forum so sorry in advance if I didn't follow a rule properly. Recently just finished building my first site using DMS2 after using PageLines for the past few years. I was able to do everything fine, but I noticed that on any Post or Category pages, the columizer in the footer in not displaying the 4 columns correctly. On all other pages it displays properly. Looking at the generated code, it appears as though one column never gets the div class "span3" which is what is causing the issue. Not sure if I just have a setting wrong somewhere, or anyone else has had this issue.  <- Homepage with footer acting normal <- Example of footer not displaying properly

      Thank you in advance!
    • Elements Update 5.0.3
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?