If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

css background image issue

If you go to easource.com and scroll to the bottom of the page you will only see part of the background image I tried inserting. There is a layer that is covering most of the background image. I tried inspecting with firebug to try and remove that layer. Can someone help me find out where this problem is occuring?

What's the issue, you want the image to be the background for that entire div or just tiled at the bottom.

FWIF, in inspect element in Chrome, I set #bottom-container a height of 100% and changed background-position to 0% 100% rather than 105, since that sort of "slides the image" off the div, if that makes sense?

What's the issue, you want the image to be the background for that entire div or just tiled at the bottom.

FWIF, in inspect element in Chrome, I set #bottom-container a height of 100% and changed background-position to 0% 100% rather than 105, since that sort of "slides the image" off the div, if that makes sense?

Is that what you wanted, or did you want the background tiled over the entire div? If so, remove the line background-repeat: repeat-x.

No. I wanted the image to be all the way at the bottom of the page but if I put the bg position past 100% the image starts to go underneath that layer and become cut off. I want to know what that white layer is and how can I remove it. If it can't be removed then how can I place the image on top of it.

the white area at the bottom is caused by the margin-bottom that has been applied to the first div class inside the #bottom-container. If you have a look you will see it has a 100px margin (<div class=​"container boxed-container" style=​"margin-bottom:​ 100px;​">​) The quickest way to get the effect you want is to create a div and have it set at the bottom of the page and work from there. This is how I would quickly resolve the issues until I could properly fix it!

With no repeat-y, what exactly are you expecting a position of 100% or more to do? Even at 100% you shouldn't be seeing ANY of the background, as it's slid COMPLETELY off the element (or should be!). That's what 100% does! Think about it, if at 0% it's at the top, and 100% is the height of the element it's applied to... see the problem here?

the white area at the bottom is caused by the margin-bottom that has been applied to the first div class inside the #bottom-container. If you have a look you will see it has a 100px margin (<div class=​"container boxed-container" style=​"margin-bottom:​ 100px;​">​) The quickest way to get the effect you want is to create a div and have it set at the bottom of the page and work from there. This is how I would quickly resolve the issues until I could properly fix it!

Thanks a lot Danny that fixed the problem but now I have a new problem.

If you scroll down all the way to the bottom on http://easource.com you will see that the #bottom-container image can not be completely seen. I want to decrease the height of the container so that the #bottom-container bg image can be seen in its entirety.