Skip to content

Instantly share code, notes, and snippets.

@stevetranby

stevetranby/get multiple background image url using jquery

Created October 11, 2010 03:20
Show Gist options
  • Save stevetranby/619921 to your computer and use it in GitHub Desktop.
Save stevetranby/619921 to your computer and use it in GitHub Desktop.
Download ZIP
Getting url of multiple bg images (chrome bug)
Raw
get multiple background image url using jquery
<html>
<head>
<style>
#a {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Latin_alphabet_Aa.svg/200px-Latin_alphabet_Aa.svg.png) top left no-repeat,
url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Latin_alphabet_Bb.svg/200px-Latin_alphabet_Bb.svg.png) bottom left no-repeat,
url(http://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Latin_alphabet_Cc.svg/200px-Latin_alphabet_Cc.svg.png) left repeat-y;
padding: 80px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var urls = $("#a").css('background-image');
var urlArray = urls.replace(/url\("/gi,'').replace(/"\)/gi,'').split(',');
for(var index in urlArray) {
$("#b").append(urlArray[index]);
$("#b").append('<br>');
}
});
</script>
</head>
<body>
<!-- Chrome/Webkit Hack (needs multiple bg images inline for now) -->
<div id="a" style="background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Latin_alphabet_Aa.svg/200px-Latin_alphabet_Aa.svg.png) top left no-repeat,
url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Latin_alphabet_Bb.svg/200px-Latin_alphabet_Bb.svg.png) bottom left no-repeat,
url(http://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Latin_alphabet_Cc.svg/200px-Latin_alphabet_Cc.svg.png) left repeat-y;
"></div>
<div id="b"></div>
</body>
</html>
@stevetranby
Copy link
Author

Chrome/Webkit hack necessary - will only load the first image into style.backgroundImage property otherwise??

@stevetranby
Copy link
Author

= Not the same exact bug per se, but this triggered the attempt to try inline style instead in Chrome =
http://code.google.com/p/chromium/issues/detail?id=54983
For this bug to happen ALL of the following must be true. If any one is not, the bug does not occur.

  • Element must be added using innerHTML, not using DOM methods such as appendChild or existing as part of the initial HTML page.
  • The background-image style must be inline.
  • The url referenced must be relative, not absolute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment