SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need footer background to stretch the length of the page

    I am playing around with re-designing my site and am doing it using Skeleton as I wan to know how frameworks function and see if they are something I want to use in the future to cut down on my coding time. I am trying to get the footer background to stretch the length of the page but it seems to be confined to the page container. When I try to override that, it is not working. Something is not correct in my code. I do see in the inspector for Chrome that footer.footer.container is 960px, but when I try to override that it doesn't work. That is why I am saying something is not right with my code. I tried to have the entire page container at 100% but that shoves the header and content to the left and I am not sure how to get it back to the middle of the page.

    The site is at http://foxdenwebsolutions.com/foxden3/index.html.

    Many of you may not like frameworks but I am just learning how to use them. I am not sure yet if they are worth it. I intend to try using Gumby, cssgrid v2, amazium, bootstrap, and semantic.

    Also haven't really touched the responsive side too much. I know that the main background and the content backgrounds will have to go so that smaller devices are not getting the bandwidth hit!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Take the footer out of the main container. All by itself it will expand to the width if the page.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Eric. That worked. Now to restyle the footer. I will remember to have either footer or header elements in their own containers separate from the other containers if I want them to stretch.

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually it doesn't quite work. There is a space at the bottom footer background. I have been trying to figure out through Chrome element inspector what is causing it but can't quite figure it out. There is a body element, a page element that stops before the footer and the footer element. The footer should go all the way to the bottom of the page.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,233
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    site_bg.jpg is 1992px wide,
    footer_bg.jpg 9s 1500px wide.

    That might be the empty space that you see at the right end.

    You could use a css3 background-image property, but it is not widely supported, yet.
    Or you could just center and repeat (x and y) the footer background image:

    layout.css, Line 175
    Code:
    footer.footer.container  {
    	width:100%;
    	background: url(../images/footer_bg.jpg) repeat 50% 0;
    }
    That leaves the inline containers with links in the footer left-aligned and your copyright and site link stacking to the right, also.

    Looks like those two categories of containers need to be centered somehow.

    Let us know if you need help doing that (I'm shirking working with the grid).

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work in Chrome. It works in IE9 and FF. I would expect it not to work in IE but work in everything else. I have uploaded the change.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,233
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The footer image does seem to be centered and repeating as expected in Chrome. You might notice that Chrome renders the colors a bit contrastier than FF, so the edges of the footer image are more obvious. You could change the visibility of those "joints" easily by modifying the image, or by using the css3 background-size property.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    The footer bg works fine in Chrome for me. Note that your site_bg.png file is 1.69MB! That is a terrible thing to do to your users. Always optimize images for the web. Even 200kb would be a big file size.

  9. #9
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I see a visible space between the footer image and the bottom of page which has the background image in Chrome, so there must be something not rendering correctly in Chrome.

  10. #10
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes Ralph...I am playing right now so I will not have that big a background. I realize that is way too big. I need to find something else that is grungy but not that fat.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Does it help if you give the footer overflow: hidden?

    You can still use the same bachground image on the body. Just optimize it. In Ps, just go to Save for Web.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,233
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    I thought we were looking at horizontal space, but I hear you describing vertical space now. Guess I wasn't paying attention. Screen size makes a difference, or possibly screen orientation. Perhaps you have a very tall, high rez monitor.

    The footer rests against the bottom of the content section of the page. It is not a "sticky footer". Is that what is happening? Do you have a tall monitor? or do you see space beneath the footer after you have scrolled to the bottom of the page???

    Ralph is right about the size of the images on your site. site_bg.jpg is the largest by far, though. It's nice that we can use textures instead of small repeating images on site backgrounds, but it comes at cost for the users who pay by the byte and those who have slower internet connections.

  13. #13
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Redid the background image in Ps and it is much better. Overflow: hidden on the footer container does not work for me. I have cleared the cache. I just don't understand why I am seeing a space between the bottom of the footer image and the bottom of the browser. If I do overflow: hidden on the body it works but I can't scroll! I tried on the page container as well and that didn't help. Is it just me?

  14. #14
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Looking up what a sticky footer is now

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Could you post a screen shot of what you are seeing? I checked in Chrome on Mac and Windows and don't see any space at the bottom.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  17. #17
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK on this page - http://ryanfait.com/sticky-footer I am seeing a space between the bottom of the fooer image and the bottom of the browser. I am definitely thinking it is my browser. I always keep Chrome updated. This is just weird.

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,233
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Yes, it sounds like a local browser problem. Maybe you have an extension interfering with normal rendering. Can you disable all add-ons and try again?

  19. #19
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You are correct, it was a local browser problem. On my laptop it was showing a visible space between the bottom of the footer and the bottom of the browser window. I am now in my office on my PC with a 24" monitor and it is fine. I will check to see what could be causing this on the laptop. I don't have a lot of extensions on Chrome. I only install the web developer stuff to help me with testing my sites. I might have to uninstall and re-install Chrome on the laptop. I do appreciate everyone's patience with me on this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •