Jump to content

Header and Footer to fit whole Webpage

Recommended Posts


Hi to all,


I've been busy learning basic CSS / HTML / Wordpress and Pagelines etc for only a couple of weeks so forgive me if these are simple questions. I have created a 'Home Page' using the 'Base Theme' and I'm at a basic level now where I'm adding simple CSS to change the look of my site. However, what I really want is a 'Header' and 'Footer' at the top of the page that fits the entire width of the page.


For the background of the 'Header' & 'Footer' I wanted to use an image which will be created using P'shop (j-peg file).


I'm going to be taking a look into this soon but I wanted to ask here first incase someone has any advice or tips in achieving this? I don't want to complicate things too much as it's a clients site I am working on so hopefully I can keep the coding simple until I'm more familular with editing/adding CSS.


Thanks for any help on this. I have also mocked up a rough example that demonstrates what I mean in-case I am unclear?


Kind regards,


James W

James Wilson

Designer & Photographer


Share this post

Link to post
Share on other sites

Hi James

If you want something like



First I use in Layout editor 

Layout Handling > Responsive with Pixel Width

Site Design Mode > Full-Width Sections



Then you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)


url(http://YOUR IMAGE.jpg);}

url(http://YOUR IMAGE.jpg);}

My exemplary code is not necessarily applicable as written, to your site, so please adjust accordingly.


It is advisable to learn how to do this on your own too.  


Check out 



If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 


  • Like 1

Life is too short to remove USB safely ...

Share this post

Link to post
Share on other sites
James B

Hey James, let us know if the above works for you.


Thanks Batman :-)

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

That's great and thanks very much for all the help with this! I'll take a look today and I'll see what I'm able to come up with?





James Wilson

Designer & Photographer


Share this post

Link to post
Share on other sites

Hi Batman,


Your code has worked but I'll need to do a few tweaks to get things looking right. One thing is the '#page .content' is convering the image that I appalied as the header so I am at present trying to add some sort of padding/margin to fix this issue. I am just gonna continue playing for now to see if I can get things looking right...


Cheers, James

James Wilson

Designer & Photographer


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.
    • 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 !

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      (Longtime Pagelines-lover.)