Grow your CSS skills. Land your dream job.

Simple BG question – beginner

  • # February 9, 2009 at 10:27 pm

    Hey guys,

    Struggling with this all night and I can’t figure out what is going on. For some reason the image I’d like to use as my header will not a.) center, or b.) align with the top of the page.

    Link: http://www.kluesenerwedding.com/stonescapes/index.html

    CSS

    Code:
    /* CSS Document */

    body {
    background: url(top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#header {
    background: url(top_head.jpg);
    background-repeat: no-repeat;
    background-position: absolute;
    top: center;
    left: center;
    height:150px;
    width:768px;
    }

    # February 10, 2009 at 12:43 am

    add:
    margin:0;
    padding:0;

    to your body.

    And here is your new header styling:

    Quote:
    div#header {
    background: url(top_head.jpg) top center no-repeat;
    height:150px;
    width:768px;
    margin:auto; /* This is what centers the div */
    }
    # February 10, 2009 at 2:13 am

    try this

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    # February 10, 2009 at 2:57 am

    Did you seriously just post that? I’ve already provided the proper solution. The no padding/margin on the body is important, and you’ve left it out. If you have nothing to contribute, don’t do it at all.

    # February 10, 2009 at 4:21 am

    i think u need to check your code onec again

    /* CSS Document */

    body {
    background: url(top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    /* this is your css code

    div#header {
    background: url(top_head.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    left: center;
    height:150px;
    width:768px;
    }
    */

    /*ul#nav {
    background-image: url(nav_bg.jpg);
    background-repeat: no-repeat;
    position: absolute;
    height: 38px;
    width: 773px;
    }

    div#container {
    background-image: url(sides.jpg);
    background-repeat: repeat-y;
    */

    # February 10, 2009 at 4:51 am
    "Ramesh" wrote:
    try this

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    I love how this is exactly the same as theDoc’s post, but 2 hours later :lol:

    # February 10, 2009 at 5:12 am

    u need to notice that 0 is missing

    # February 10, 2009 at 11:34 am

    Thanks for the responses guys. I’ll give this a try at lunch.

    # February 10, 2009 at 12:24 pm

    Thanks guys, that worked.

    So I don’t make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?

    # February 10, 2009 at 12:29 pm
    "H2oskier" wrote:
    Thanks guys, that worked.

    So I don’t make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?

    you need to understand the box modal really.

    (this is how I look at it)
    think of a product like a TV
    TV is the content
    padding is the stuff between the TV and the box
    Border is the box it comes in
    and margin is the space that box sites from the edge of the room (if that makes sense)

    so you set your margin to have a set size, if you want it to be a certain size e.g. in the centre you use auto, (no matter what size).

    # February 10, 2009 at 1:16 pm
    "H2oskier" wrote:
    Thanks guys, that worked.

    So I don’t make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?

    Just to clarify, do you have margin:auto in your body tag? What I suggested was:

    It should be…

    Code:
    margin:0;
    padding:0;

    …in your body.

    What this is doing is resetting automatic browser settings. There are numerous articles about "CSS Resets", do a google search and I’m sure you’ll find some answers there. Change the padding to 5px and you’ll see what the browser was trying to do originally.

    The…

    Code:
    margin:auto;

    …should be the one in your header div to center it.

    If you still require to have top and/or bottom margins, here are some examples:

    Code:
    margin: 20px auto; /* This will have a top-margin of 20px, bottom-margin of 20px, and will be centered */
    margin: 10px auto 5px auto; /* This will have a top-margin of 10px, bottom-margin of 5px, and will be centered */
    margin: top right bottom left; /* This is the order in which you can shorthand-declare margin/padding */
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".