Trying to have get a div tag to extend to the bottom of the browser
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has 开发者_StackOverflow中文版some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image? Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.
加载中,请稍侯......
精彩评论