CSS Put image at top of page

Question

Hi,

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.

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

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