SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image creating problem in footer

    Anyone know how to fix this? When I insert the animated gif image file into this construction page, it messes up the footer: a section of gray shows up at the very bottom of the footer/page (see screenshot). It should stay cream/white like the rest of the pages. The site is based on a template (default.dwt) and it doesn't happen when I insert other images.

    Thank you!
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Could you clarify what the problem is? I'm looking at the image and the page you linked to and clueless as to what gray you are talking about.

    EDIT: ah, right, I see. The green bit at the bottom. The one other page I clicked on had the same thing. Bleh. I'll take another look.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You saw it on another page? See the homepage. Bg should be green/gray at top, the bar across and then straight cream all the way through the footer and down.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You have this in the head of your page, which is overriding the normal body background, placing a background image on the body that is too short:

    Code:
    <style type="text/css">
    
    body {
    	background: #B7B79E url(../img/bg.jpg) repeat-x;
    }
    
    </style>
    I don't think the effect has anything to do with animated gifs.

    Rather than have such a tall background image, it would be better to set a background color on the body like #faf9e5 and then just have the green part or the background image with the stripe at the bottom as your background image. Then, if a page gets really tall, you'll have no issues of getting the green/gray background at the bottom again.

    As for seeing the effect on another page, I'm sure I did, but I can't find it now. May be going mad.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have that same thing on other pages and it's not doing that. See this page.

  6. #6
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You have a two colour background image set on body. The upper part of the image is beigey grey and the lower cream. Because the beigey grey colour is also set as the background colour, when the page is taller than the background image the beigey grey is visible. So set the body background colour to the cream (#FDFCEA).

  7. #7
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    body {
       background: #B7B79E url(../img/bg.jpg) bottom left repeat-x;
    }
    This way the background image is allways snug against the page bottom. The downside is that the green area gets longer as the page gets longer.

    Ralph's suggestion is fat better.
    Last edited by zbing; Mar 22, 2011 at 06:08. Reason: stuff
    zbing

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm....I tried changing the bg color to the cream: #FDFCEA on the CSS and in the header but it is still doing it. What I noticed when troubleshooting is that the green goes away when I take the gif out but when I put it in again it shows up. You can see on pages that are longer than this one that it isn't happening so it's not about the length of the page.

  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    On the other pages, body is displaying a background image named bg2.jpg, which is taller than the bg.jpg set in the embedded stylesheet on the problem page.

    Using Firebug, switching the body background to #FDFCEA or the image to bg2.jpg produces cream all the way to the bottom.

    A reliable way to achieve this without height ever causing a problem would be to crop the cream area off the background image and set the body background colour to #FDFCEA.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait, I'm sorry, changing the bg color to cream did work. Maybe I didn't save it or something. Although, I still think there's an issue there b/c when I inserted a different image, it was fine but when I inserted the gif, it messed up the footer. Weird!

    I'm not sure how to set up the bg like Ralph suggested.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    I have that same thing on other pages and it's not doing that. See this page.
    It does do it on that page if your viewport is tall enough. All the advice you need has now been supplied a few times in the posts above, so make sure to read them carefully.

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    On the other pages, body is displaying a background image named bg2.jpg, which is taller than the bg.jpg set in the embedded stylesheet on the problem page.

    Using Firebug, switching the body background to #FDFCEA or the image to bg2.jpg produces cream all the way to the bottom.

    A reliable way to achieve this without height ever causing a problem would be to crop the cream area off the background image and set the body background colour to #FDFCEA.
    I set it up with two different bgs so that the stripe would be higher on the page for the shorter pages. It looks funny starting near the footer. Does that make sense?

    Maybe I should just do the same thing with all the pages and use the set up for the shorter pages -- start the stripe further up.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    I'm not sure how to set up the bg like Ralph suggested.
    Ah, sorry, posted over the top of you. Well, open the bg image in Photoshop and just crop out the dream bit in the lower portion. Then change the body background color from #B7B79E to #FDFCEA.

    Since the background image has a uniform color, it's more efficient to use a color on the body to create this than to rely on an image. Images are only useful if you need something like a gradient or pattern (though even gradients will soon be handled universally by CSS3).

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    Maybe I should just do the same thing with all the pages and use the set up for the shorter pages -- start the stripe further up. Don't remember. The designer may have been picky about that.
    Personally, I think it looks odd to have the stripe moving up and down from page to page, but if you want to stick with that, just make two versions—a tall and a short. Then put a special class on the body tag of the shorter pages and use that to target those pages with the shorter background image (assuming that fewer pages have the short image).

    E.g. For all pages, have something like

    Code:
    body {background: url(long image)}
    and on the shorter pages, place a class="whatever" on the body tag and set the alternate bg image with

    Code:
    body.whatever {background: url(short image)}

  15. #15
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I"m with you too. It does look silly with the bg moving up and down. I'm going to stick with the one with the stripe starting lower down. Just curious, do you have a preference?

    Edit....woops....I mean further up b/c it looks silly on some pages further down. ie., the homepage and other pages.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I definitely think I'd go for the shorter one. As you say, on short pages the longer one will look odd, while the shorter one will look fine on all pages.

  17. #17
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took your suggestion, Ralph and cut the bg image and used the cream color as bg color. And each page has same bg. Man, that was crazy having more than one bg - not sure what I was thinking. Looks great!

    Thanks so much everyone.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Great, glad it's sorted now.


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
  •