| SitePoint Sponsor |
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!
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.
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.
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:
I don't think the effect has anything to do with animated gifs.Code:<style type="text/css"> body { background: #B7B79E url(../img/bg.jpg) repeat-x; } </style>
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.
I have that same thing on other pages and it's not doing that. See this page.
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).
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.Code:body { background: #B7B79E url(../img/bg.jpg) bottom left repeat-x; }
Ralph's suggestion is fat better.
Last edited by zbing; Mar 22, 2011 at 06:08. Reason: stuff
zbing
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.
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.
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.
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.Originally Posted by Sculley
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.
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).
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
and on the shorter pages, place a class="whatever" on the body tag and set the alternate bg image withCode:body {background: url(long image)}
Code:body.whatever {background: url(short image)}
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.
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.
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.
Great, glad it's sorted now.
Posting Permissions
Reply With Quote
Bookmarks