Jump to content

Recommended Posts

Posted

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;
}



Posted

Just try to combine the image and repeat lines into:

 

background: url(images/header.jpg) repeat-x;

 

and see what happens...

Posted

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;
}

Posted

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....

Posted

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).

Posted

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.

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...