Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find the background-position / background-image etc for multiple backgrounds using jQuery in Safari

Tags:

jquery

css

safari

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.

like image 745
Rupert Avatar asked Jul 19 '11 07:07

Rupert


People also ask

How do I put multiple background images on my website?

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.

How do I center a background in a div?

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

What is the correct syntax for having multiple images for the background page?

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.


1 Answers

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.

like image 52
Zhenya Avatar answered Sep 22 '22 11:09

Zhenya