Forums

  • # March 24, 2009 at 4:11 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    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!

    # March 24, 2009 at 5:18 am

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

    # March 24, 2009 at 3:17 pm

    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

    # March 24, 2009 at 3:58 pm
    "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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag