Need footer background to stretch the length of the page

HTML & CSS
1

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

Take the footer out of the main container. All by itself it will expand to the width if the page.

3

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

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

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


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

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

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

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

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

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

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

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

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! :wink: I tried on the page container as well and that didn’t help. Is it just me?

14

Looking up what a sticky footer is now

15

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

Here is my “css3 sticky footer” http://www.websitecodetutorials.com/code/css/css3-sticky-footer.php

17

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

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

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.