Maybe I'm missing something here.
I'm trying to get the current background info for an element (div
) with multiple backgrounds, set using the longhand background-repeat
, background-position
and background-image
.
Using jQuery, I simply do var bPos = $('#element').css('background-position')
to get the set of current positions, which will give me something like '0 0, 100px 100px, left bottom'
in Firefox and Chromium (currently versions 5 and 12 respectively), but in Safari (version 5 on OS-X) it just returns the first value pair ('0 0'
). These CSS values are set in an external stylesheet.
Does anyone have any idea as to why this is, and how to go about it to get the full set of value pairs in Safari (using the shorthand background
property doesn't do it either)?
Edit:
Here is the CSS that is used in an external style sheet:
#page{ background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x; background-image: url('../images/line.png'), url('../images/line.png'), url('../images/line.png'), url('../images/line.png'), url('../images/line.png'); background-position: 0 798px, 0 653px, 0 125px, 0 88px, 0 78px; }
Edit:
Ok, I made a test case for this on jsFiddle and have reported it as a jQuery bug since it seems to be reproducible behaviour (although I accept that it might be a browser implementation problem rather than actually a jQuery bug).
Still, if anyone has any ideas...
Edit:
The jQuery ticket has been closed - I take this to mean that it is a Safari bug - I'm not quite sure how to go further from here, but I've posted a bug report with Apple.
Edit:
As pointed out by Sindre Sorhus, this appears to have been corrected in Safari 5.1.
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
For center or positioning the background image you should use background-position property . The background-position property sets the starting position of a background image from top and left sides of the element . The CSS Syntax is background-position : xvalue yvalue; .
background-image: url(), url(), …; This property is used to set one or more background images to the element, separated by commas. background-position: right bottom, left top; This property is used to set the position of different images in the page. It set the initial position for each background image.
Since it's fixed in 5.1, I guess it's not a big deal anymore, but I wander if as a workaround you could initially set the background from js by
$('#page').attr('style', '...');
and then read it from there... kinda stupid and pain in the ass, yeah.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With