3

Is it possible to change only Y value of background position in CSS?

background-position-y is not a valid solution.

Samuel Goldenbaum
  • 18,391
  • 17
  • 66
  • 104

6 Answers6

3

Only by reading (with JS) the current value of background-position (using a computed style method if it isn't set inline), parsing it to read the X value and then setting it again using the X value you just retrieved.

There is no way to say "Take the background position X value from the cascade and the Y value from this" in CSS.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • @Chev — There is no way to say "Take the background position X value from the cascade and the Y value from this" in CSS. (I'll add that to the answer) – Quentin Jun 18 '12 at 15:28
1

Just try this 

background-position-y: 10px;

Worked fine for me

user229044
  • 232,980
  • 40
  • 330
  • 338
varsi
  • 11
  • 1
1

According to caniuse.com and this SO Question, background-position-y is now standard and supported in all browsers except older versions of Firefox.

background-position-x/-y, background-repeat-x/-y approved for level 4 of backgrounds and borders.

Josh
  • 718
  • 10
  • 25
0

No, that's not possible. While background-position allows only one value to be set, this would define x only and make y center. Everything else, like background-position-y is non-standard and therefore only supported in some browsers.

kremalicious
  • 1,351
  • 11
  • 12
  • That is incorrect. Background-position accepts up to two white-space separated values, be in descriptive coordinates, eg `top center`, relative units, eg `50% 25%` or absolute units, eg `50px 200px`. – Terry Dec 31 '14 at 06:43
  • @Terry sorry if I wrote it not clear enough but I didn't say `background-position` allows only 1 value alone but that it ALLOWS to use 1 value only. But as I said this wouldn't solve the original question. – kremalicious Jan 06 '15 at 14:55
0

background-position-y: xpx should work.

Can you show the code see we can see why it might not be working?

user229044
  • 232,980
  • 40
  • 330
  • 338
Lex Eichner
  • 1,056
  • 3
  • 10
  • 35
  • 1
    @Lex — The question explicitly excludes `background-position-y` (presumably because it is non-standard and doesn't have sufficient browser support for the project requirements). – Quentin Jun 18 '12 at 15:30
-1

use background-position:0px ypx;