How do I center a div inside a background image across browsers?

Question

So this website has content inside a background image that has a square in it but it is not centered. In firefox it is too big, and in Chrome it is too far to the left, and the only way to center it is by pressing ctrl+ (which makes the browser window smaller), and even then it is still not centered. Does anyone have a fix for this? Thanks.

Answer 1

You need to centre the background image:

body {
    background: #000000 url(images/waves.jpg) center top repeat-x;
}

Answer 2

Essentially if you have a div inside another div or a div inside your html body tag, if the div in question has a width defined, you just need to

.myDiv {
margin: 0 auto;
}

Answer 3

This will work..

body {
    background: background: url(images/waves.jpg) center;
}

Answer 4

Personally I use percentages to center the background image:

background-position:50% 50%;

Full code for body:

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #989898;
background-image: url(images/waves.jpg);
background-position: 50% 50%;
}