jbwebdesign Posted February 14, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
Andrea Posted February 14, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
jbwebdesign Posted February 15, 2010 Author Report Share 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 Link to comment Share on other sites More sharing options...
Andrea Posted February 15, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
jbwebdesign Posted February 15, 2010 Author Report Share Posted February 15, 2010 you can see the page here: http://www.textmonster.org/temp Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 15, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
shelfimage Posted February 15, 2010 Report Share 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 Link to comment Share on other sites More sharing options...
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.