CSS Put image at top of page

Question

I need to have an image at the top-center of a web page in css. Now, Im just using the background-image: in css but this puts it at the middle of the page.

Here's my code:

body {
  background-image: url("theimageurlgoeshere"); //The image is 842 x 508
  background-attachment:fixed;
  background-position: center top;
  background-repeat: no-repeat;
}

Also, Changing the background-position: seems to have no effect on the outcome of the site. Any help is appreciated.

Ratepayer

what browser are you targeting? – Synovia

Not background-attachment:fixed;. – Off

Answer 1

Change the arrangement of these values from center top to top center

background-position: top center;

Tested in Safari 4, Chrome, and FF 3.5

The code I used in testing was:

 body { background: url(./image.png) no-repeat top center; }

Corrinnecorrival

According to w3schools: The first value is the horizontal position and the second value is the vertical -- w3schools.com/css/pr_background-position.asp – Synovia

Referencing w3.org/TR/CSS2/colors.html#background-properties as an appropriate source for clarification. :-) – Corrinnecorrival

Your reference states (more accurately than w3schools): If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. "not a keyword" indicates that both "top center" and "center top" are valid usages. – Synovia

Answer 2

And if you want it on a single line:

body {
  background: url('path') center top fixed no-repeat;
}

More info: http://www.w3schools.com/css/pr_background-position.asp

Momism

Answer 3

If this dosen't work. Do margin:0 auto;

Cringe