CSS Put image at top of page

css background-image background-position
nosedive25 picture nosedive25 · May 21, 2010 · Viewed 29.9k times · Source

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

Riley picture Riley · May 21, 2010

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

Related questions

Multiple background images positioning

I've got three background images, all of width 643px. I want them to be set out like so: top image (12px height) no-repeat middle image repeat-y bottom image (12px height) no repeat I can't seem to do it without getting …

Read More
CSS background-position animate right to left

I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following …

Read More
CSS Background Gradient with offset

I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;. It looks quite good except one little issue: of course the gradient does not end at the bottom of …

Read More