StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Can't comment under answers, so here is jQuery version including <code>background-size</code> (posted because this question is first one in google search and may be useful to someone else than me):</p> <pre><code>function getBackgroundSize(selector, callback) { var img = new Image(), // here we will place image's width and height width, height, // here we get the size of the background and split it to array backgroundSize = $(selector).css('background-size').split(' '); // checking if width was set to pixel value if (/px/.test(backgroundSize[0])) width = parseInt(backgroundSize[0]); // checking if width was set to percent value if (/%/.test(backgroundSize[0])) width = $(selector).parent().width() * (parseInt(backgroundSize[0]) / 100); // checking if height was set to pixel value if (/px/.test(backgroundSize[1])) height = parseInt(backgroundSize[1]); // checking if height was set to percent value if (/%/.test(backgroundSize[1])) height = $(selector).parent().height() * (parseInt(backgroundSize[0]) / 100); img.onload = function () { // check if width was set earlier, if not then set it now if (typeof width == 'undefined') width = this.width; // do the same with height if (typeof height == 'undefined') height = this.height; // call the callback callback({ width: width, height: height }); } // extract image source from css using one, simple regex // src should be set AFTER onload handler img.src = $(selector).css('background-image').replace(/url\(['"]*(.*?)['"]*\)/g, '$1'); } </code></pre> <p>or as jQuery plugin:</p> <pre><code>(function ($) { // for better performance, define regexes once, before the code var pxRegex = /px/, percentRegex = /%/, urlRegex = /url\(['"]*(.*?)['"]*\)/g; $.fn.getBackgroundSize = function (callback) { var img = new Image(), width, height, backgroundSize = this.css('background-size').split(' '); if (pxRegex.test(backgroundSize[0])) width = parseInt(backgroundSize[0]); if (percentRegex.test(backgroundSize[0])) width = this.parent().width() * (parseInt(backgroundSize[0]) / 100); if (pxRegex.test(backgroundSize[1])) height = parseInt(backgroundSize[1]); if (percentRegex.test(backgroundSize[1])) height = this.parent().height() * (parseInt(backgroundSize[0]) / 100); // additional performance boost, if width and height was set just call the callback and return if ((typeof width != 'undefined') && (typeof height != 'undefined')) { callback({ width: width, height: height }); return this; } img.onload = function () { if (typeof width == 'undefined') width = this.width; if (typeof height == 'undefined') height = this.height; callback({ width: width, height: height }); } img.src = this.css('background-image').replace(urlRegex, '$1'); return this; } })(jQuery); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload