background-position: center 0;

Is this a valid background-position css value?

  • changed your backgroung to background - I hope that was just a typo and not the real problem! Tony Crockford almost 8 years ago
  • p.s. the order is important (see below), your position is top of the image aligned to top of the box and centered horizontally. Tony Crockford almost 8 years ago

2 answers

This was chosen as the best answer

It is, but there are browsers that have issues with mixing keywords and numeric values. (the spec only changed in CSS2.1, in CSS2 it was invalid to mix them)

The important thing to note is that if you only use one value for background-position the second value is assumed to be center.

When you have two values and one is not a keyword then the order is horizontal, vertical

It is possible to confuse yourself (and your code maintainer) by mixing keywords and numerics thus:

background-position: 50% left ; 

Is valid but in the wrong order and if you then alter it to

background-position:  50% 0;

It means something else entirely: horizontally centered, vertically top.

So stick to all keywords or all numerics for readability and maintainability and write them in horizontal, vertical order (across, down)

Another important point is that numeric lengths refer to the 0,0 point on the image and will place the top left of the image at the values given, i.e:

background-position: 100px 50px;

Means place the top left corner of the image at a point 100px from the left of the box, 50px down; but using % values applies to a different point on the image, e.g:

background-position: 25% 30%;

Means find the point on the image equal to 25% of its width and 30% of its height and place that point 25% from the left of the box and 30% from the top.

This allows for some clever use of oversize images inside flexible boxes.

Read more at Sitepoint's excellent CSS reference

Answered almost 8 years ago by Tony Crockford

From my reading of the relevant CSS specification, I'd say it is.

Give this a shot on a test page:

body {
  background: url('bg.png');
  background-position: center 0;

You can, of course, use any image you like instead of bg.png.

Answered almost 8 years ago by Voyagerfan5761