CSS BACKGROUND-POSITION-Y
If a ‘background-image’ is specified, this property specifies the initial position on the Y-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the upper side of the rendering box, and a maximum value is at the lower side. The X-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-x’ properties.
Example
body {
  background-image: url(image.gif);
  background-repeat: repeat-x;
  background-position-y: bottom
}
Possible Values
[Percentage]: Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on BOTH the image and the canvas and may be negative (eg: 70% indicates the reference point 70% from the top side of the image is to be located at 70% from the top side of the element’s rendering box.
[Length]: Represents an absolute Y-coordinate position for the image and may be negative. Standard Absolute or Relative Length Units may be used here.
tom|middle|bottom: Keywords representing Y-axis screen positions for image placement
7 Responses
“left|center|right” does not sound right for Y-axis positioning….
IT shouldt work with Pixels, does it?
It’s indeed not the right way
Why are pixels not given?
This article is a waste of space and a searcher’s time. There’s so much more you could have done with this page.. You could have at least made mention of –and told readers where to learn– the fantastic possibilities that can be achieved by repositioning a single background image with, say, 100 different icons on it, such as arrows and other menu symbols and words, and how the web designer can reveal whichever appropriate icon thereon in any given division meant to be clicked on or moused over as a button or menu item.
This is precisely what I hoped to find here. But the search goes on…
I would have to agree; ‘waste of space’ is pretty harsh.
That being stated, it seems to me that he did make it better; simply by giving me an interesting idea on its usage.
What I don’t get is if he understands the background-position-x and background-position-y, and the other comments make note that this can also be done by pixel (ie: background-position-y:125px;)… then what does he not understand? What is he looking for that this didn’t provide?
Ok. so, above code doesn’t work in Firefox. Before you say well, there is
background-position: 30px 20%;
My problem isn’t that simple.
Sure following code works for just a setup or using it more statically:
background-position-x: 300px;
background-position: 300px 0;
background-position-y: 300px;
background-position: 0 300px;
But, I want to use it for dynamically and use it with jQuery in an IF statement like following and then update it dynamically:
var yposition=50%;
if($(“.showimageâ€).css(“background-positionâ€) === “-21600px †+ yposition){
$(“.showimageâ€).css(“background-positionâ€,â€21000″ + yposition );
else{
$(“.showimageâ€).css(“background-positionâ€,â€+=600″ + yposition );
}
}
change function(){//not real function
yposition = {change on condition}
}
Funny thing is about it is above code works in IE and Chrome , but Firefox doesn’t. because Firefox doesn’t support background-position-x and background-position-y, I cannot explicitly declare the position on x and y, where as it works in IE and Chrome. Anyone have any idea? Firefox is giving me a big headache with this.