- This topic is empty.
-
AuthorPosts
-
March 24, 2009 at 4:11 am #24409tomwalters5678Member
Hi, I would like to know how to make a div, with a background image repeat for 100% of the page. I have tried for a while to fix it, but I am still left with a small white border round the edge.
Here is my CSS
Code:body {
background-color:#fff;
}#repeat {
background-image:url(‘../images/box.png’);
background-repeat:repeat-x;
width:100%;
margin:0 auto;
padding:0;
margin:0;
}a {
font-family:Calibri, “Arial Narrow”, Helvetica, Sans-serif;
color:#fff;
font-size:16px;
}and here is my markup
Code:Here is a link to a live example – http://tomsbigbox.com/coffeebeans, by the way on the page is another images, just for reference.
Any help would be very much appreciated, as it is driving me insane!
March 24, 2009 at 5:18 am #55237Rob MacKayParticipantfirstly the border round the edge of the page is because you need a browser CSS reset…
if you add:
Code:* { margin: 0; padding:0 }to the top of your CSS – that will get rid of the "border" which is actually just the default browser CSS. I would look into CSS resets more, there are some great ones out there, personally I prefer Yahoo’s option, you can find that here:
http://developer.yahoo.com/yui/reset/
Now onto the repeat… what do you want it to do – repeat vertically or horizontally? – Normally what you would do is set the background of your HTML…
So for your example I would do this:
Remove the background colour from your body tag, then:
Code:html {
background:url(../images/box.png) repeat-x 0px 60px;
height:100%;
}If thats what you mean let me know and I will show you how to do it better… if not let me know what you mean :)
March 24, 2009 at 3:17 pm #55294tomwalters5678MemberHi, thanks Robskiwarrior for the reply – it has worked! Like I say thanks a lot for this, I have looked everywhere! Is this because of default properties set by the browser?
Thanks again
March 24, 2009 at 3:58 pm #55295Rob MacKayParticipant"tomwalters5678" wrote:Hi, thanks Robskiwarrior for the reply – it has worked! Like I say thanks a lot for this, I have looked everywhere! Is this because of default properties set by the browser?Thanks again
yea like al_m473 its the default way a browser applys a CSS Style from its own CSS file, until you tell it otherwise, it will follow those rules. :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.