I am working on this site: http://indulgemedia.ca/momentum/index.php If you scroll down to the bottom of the page you notice that the "M" design pushes down below the bottom of the page. and is not centered... My question is how to I get it to not push below the bottom of the page and how do i get it to center...? Here is the CSS used to position that "M" and here is the HTML where it is positioned: If you need more code please feel free to view the source code or ask me.
What do you mean by this? Where exactly do you want it to cut off? As for centering an absolute div, try adding margin:0 auto; to #m-bg
I think what you are trying to achieve can be done with a lot less code, and a lot more easily. Have you tried just layering the backgrounds using the HTML and BODY tags. You can apply backgrounds to both of these. You can then significantly shring the size of that M image, it has a lot of empty pixels that aren't need, just set the background-postion to 50% bottom.
Hello, Thank you for the responses. Cutting off those extra pixels did make the bottom of the page look fine. However Now that M is stuck at the top of the page and is still not centered horizontally... Here is my new css code for it...
Add min-width: 1600px to the body. Remove <div class="content-container"></div> that is doing nothing. Put <div id="m-bg"></div> at the bottom, just before </body>. Set margin: -512px auto 0; to pull it up over the footer.
That helped a bit... Making the min width 1600 only loaded the page off center so it looks like the M is aligned. However when I make the page wider the M stays stuck to the left still. Also now the M is appearing on top of my main container now. How do I get it to go behind those images?
To put it behind the images, add z-index: 1; to #wrapper. #wrapper { position: relative; margin: 0 auto; text-align: left; width: 1052px; [COLOR="blue"]z-index: 1;[/COLOR] } Code (markup):
That helped out alot thanks! Now I am just wondering what I can do to keep that "M" in the background centered?
Your main container should have 100% with like main-container { width:100%; margin:0px; padding:0px; }