Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Divs – making them 100% of the page?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24409

    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:




    Problem Repeating

    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!

    #55237
    Rob MacKay
    Participant

    firstly 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 :)

    #55294

    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

    #55295
    Rob MacKay
    Participant
    "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. :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.