1

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.

zoranc
  • 2,410
  • 1
  • 21
  • 34
Gregory
  • 11
  • 1
  • oh sorry yes... body { margin: 0; padding: 0; line-height: 1.5em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #989898; background: #000000; }#container { width: 900px; margin: 0 auto; padding: 0 30px 10px 30px; } #content { padding: 10px 30px 0 40px; background: url(images/content_top.jpg) top center no-repeat; } – Gregory Mar 10 '14 at 13:35

4 Answers4

0

You need to centre the background image:

body {
    background: #000000 url(images/waves.jpg) center top repeat-x;
}
Moob
  • 14,420
  • 1
  • 34
  • 47
0

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;
}
Chris Hawkes
  • 11,923
  • 6
  • 58
  • 68
0

This will work.. 

body {
    background: background: url(images/waves.jpg) center;
}
Ritesh Chandora
  • 8,382
  • 5
  • 21
  • 38
0

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%;
}
vaskort
  • 2,591
  • 2
  • 20
  • 29
  • That fix actually worked great, thank you all for your help. Just one last problem. There seems to be a line below the footer, I am not sure what it is or how to get it out? Thanks again for your help, all. – Gregory Mar 10 '14 at 13:48
  • Hmm not sure what you mean, I see something like a white shade from the background. Try to decrease the height of your footer. #footer { height:32px; } – vaskort Mar 10 '14 at 13:50
  • Hmm odd, you don't see a line under the bottom of the box? I took a screen capture and linked it here: http://www.gregonthe.net/images/oops.jpg – Gregory Mar 10 '14 at 14:15
  • you forgot to put the link :P – vaskort Mar 10 '14 at 14:17
  • again, decreasing the height of footer worked. You css god :) Thank you. – Gregory Mar 10 '14 at 14:34
  • no problems mate! feel free to mark me as an answer if I helped! Cheers and good luck! – vaskort Mar 10 '14 at 14:47