Simple BG question – beginner

[H2oskier]

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

[Ramesh]

try this

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

[Ramesh]

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;
*/

[ikthius]

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

[Ramesh]

u need to notice that 0 is missing

[H2oskier]

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

[H2oskier]

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?

[ikthius]

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

[Author]

Posts