jbwebdesign Posted February 14, 2010 Report Posted February 14, 2010 Hey everyone, I am working on some css code and I can't seem to get the background to repeat-x on mozilla but it works fine on IE. I'm not sure what i am doing wrong, please help. Here is my code: /* CSS Document */ body{ background-color:#f0eff0; margin:0; padding:0; width:1150px; height:1420px; border:none; } #header{ background-image:url(images/header.jpg); background-repeat:repeat-x; width:100%; height:150px; } #nav{ background-image:url(images/navbar.jpg); background-repeat:repeat-x; height:58px; width:100%; } #main{ background-image:url(images/main.jpg); background-repeat:repeat-x; width:100%; height:1121px; } #container{ margin-left:100px; width:1050px; border:double 1px; border-bottom:none; border-top:none; } #content{ margin-left:225px; width:575px; } #footer{ background-image:url(images/footer.jpg); background-repeat:repeat-x; height:91px; width:100%; padding:25px; } .copyright{ font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; font-weight:bold; text-shadow:#999999; } Quote
Andrea Posted February 14, 2010 Report Posted February 14, 2010 Just try to combine the image and repeat lines into: background: url(images/header.jpg) repeat-x; and see what happens... Quote
jbwebdesign Posted February 15, 2010 Author Report Posted February 15, 2010 hey, i tried to combine the css just like you said and it still doesn't work. hmm.... i wonder why.... here is the new code /* CSS Document */ body{ background-color:#f0eff0; margin:0; padding:0; width:1150px; height:1420px; border:none; } #header{ background: url(images/header.jpg) repeat-x; width:100%; height:150px; } #nav{ background: url(images/navbar.jpg) repeat-x; height:58px; width:100%; } #main{ background: url(images/main.jpg) repeat-x; width:100%; height:1121px; } #container{ margin-left:100px; width:1050px; border:double 1px; border-bottom:none; border-top:none; } #content{ margin-left:225px; width:575px; } #footer{ background: url(images/footer.jpg) repeat-x; height:91px; width:100%; padding:25px; } .copyright{ font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; font-weight:bold; } Quote
Andrea Posted February 15, 2010 Report Posted February 15, 2010 That's weird - technically, it should work either way, but I usually combine my CSS wherever I can. Ideally, you have to page uploaded somewhere and can paste a link, so we can see everything that's going on.... Quote
jbwebdesign Posted February 15, 2010 Author Report Posted February 15, 2010 you can see the page here: http://www.textmonster.org/temp Quote
falkencreative Posted February 15, 2010 Report Posted February 15, 2010 As far as I can tell, it is working correctly. You do have an issue though -- You don't need the "width="100%" on your #header, #nav, #main, and #footer divs -- They automatically have that property. Since the #footer has a "width="100%" and also left/right padding, it appears to be longer than the rest of the divs. Remove the "width=100%" from those four divs in your CSS, and that will fix the issue (and most likely fix what you think is a repeating background issue). Quote
shelfimage Posted February 15, 2010 Report Posted February 15, 2010 Right, the padding in the footer is making it expand horizontally wider than the other elements. Also, your body CSS contains a width property. You usually want to leave the body property alone and wrap your template in a div to control the width. Also, add margin:auto to your body and it will center your template nicely. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.