Jump to content

Header and Footer expansion customizations

Recommended Posts


Hi All,


I currently have a portfolio website that I am rebuilding with wordpress+pagelines. I want to keep the overall design and just upgrade my graphics and capabilities. 


This is my current site : http://casseysdesigns.com




This is my wordpress site : http://casseysstudioofdesigns.com




I want to have the header and footer background expand across the entire page no matter what size... I would like the content of the header and footer to remain within the content area (This is how I have it set up on my current website via css)


The problem is that even using developer tools and updating my style.css in my child theme the parent theme (pagelines) is overriding my styles and I can't get the header and footer bgs to extend. I tried a bg img that has a black bar across the top as a "fix" but it doesn't solve the problem for the footer and it doesn't respond the way I want it to on different sized screens. 


Any help would be greatly appreciated! If you need more information to assist me please let me know!




Share this post

Link to post
Share on other sites



This couldn't be easier.


For a header background area, create an image more than 1980px wide, by the height you want the background to appear.


Go to Dashboard > PageLines > Site Options > Color Control.  Upload the image. Set the vertical alignment to 0 and the horizontal to 50 and repeat to no repeat. Save the settings.  Your background will now be full width.  If you have a narrower image you want tiled, set the background to repeat horizontally.


For the footer, you need to use CSS. You can see an example of that by using Firebug for Firefox or Chrome's Inspection Tool and visiting the footer at www.epicurus.com.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Hi Rob, 


Thank you for your response. I am aware that I can technically use the background image to create my header section. However, I do intend to use a background image for the whole site. I want to use my image specifically for the header area. 


I have visited http://www.epicurus.com/ and looked over the stylings used to create the effect (which is what I am looking for) and I think I will be able to use this approach (or my alteration of it) for both the header and footer.  


Thank you very much for your help!


Share this post

Link to post
Share on other sites

You're very welcome.


While you're there, grab a recipe! Make a cocktail! Join the Discussion forums! (BTW, that's my site).

Former PageLines Moderator, Food Expert and Raconteur

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

    • yasinyaqoobi
      By yasinyaqoobi
      In the footer of my website, I can't find where Leasing is located. I have to remove it.
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.

    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      Thank you in advance !