Resizing background images to their original size using jQuery

Question

Resizing background images to their original size using jQuery

Can anyone help me figure out the actual size in pixels of a background image that is being displayed?

<style>
body {
    background-image: url(background.jpg);
    background-size: contain;
}
</style>

I tried using jQuery to get the size of the background image with the following code:

var img = new Image;
img.src = $('body').css('background-image').replace(/url\(\"|\"\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

However, this code returns the size of the real image, not the displayed size. For example, on a device with 320px width, bgImgWidth still shows 800px from the actual image.

Any suggestions or clues on how to correctly determine the displayed size of the background image?

jquery css background size

Answer 1

Answer №1

To determine the height of an image being displayed, you can calculate it based on its width and height.

var img = new Image();
var $el = $('body');
var containHeight = null;
var containWidth = null;
var containImg = {
  w: null,
  h: null
};
var bkgImgDims = null;

img.src = $el.css('background-image').replace(/url\(\"|\"\)$/ig, "");

var bgImgWidth = img.width;
var bgImgHeight = img.height;

var imgProportionalH = Math.abs(bgImgHeight / bgImgWidth);
var imgProportionalW = Math.abs(bgImgWidth / bgImgHeight);

// Calculate the proportions of the background image contained in the element
function getElProportions() {
  var elW = $el.width();
  var elH = $el.height();
  var elProportionalH = Math.abs(elH / elW);
  var elProportionalW = Math.abs(elW / elH);

  // Determine if the image is not taking up 100% of the element's width
  if(elProportionalH < imgProportionalH) {

    containImg.h = elH;
    containImg.w = Math.abs( elH / imgProportionalH );        

  } else {

    containImg.h = Math.abs( elW / imgProportionalW );
    containImg.w = elW;

  }

  return containImg;
}

$(document).ready(function(){
  bkgImgDims = getElProportions();
});

$(window).resize(function(){
  bkgImgDims = getElProportions();
});

JSBin Example

Answer 2

To determine the height of an image being displayed, you can calculate it based on its width and height.

var img = new Image();
var $el = $('body');
var containHeight = null;
var containWidth = null;
var containImg = {
  w: null,
  h: null
};
var bkgImgDims = null;

img.src = $el.css('background-image').replace(/url\(\"|\"\)$/ig, "");

var bgImgWidth = img.width;
var bgImgHeight = img.height;

var imgProportionalH = Math.abs(bgImgHeight / bgImgWidth);
var imgProportionalW = Math.abs(bgImgWidth / bgImgHeight);

// Calculate the proportions of the background image contained in the element
function getElProportions() {
  var elW = $el.width();
  var elH = $el.height();
  var elProportionalH = Math.abs(elH / elW);
  var elProportionalW = Math.abs(elW / elH);

  // Determine if the image is not taking up 100% of the element's width
  if(elProportionalH < imgProportionalH) {

    containImg.h = elH;
    containImg.w = Math.abs( elH / imgProportionalH );        

  } else {

    containImg.h = Math.abs( elW / imgProportionalW );
    containImg.w = elW;

  }

  return containImg;
}

$(document).ready(function(){
  bkgImgDims = getElProportions();
});

$(window).resize(function(){
  bkgImgDims = getElProportions();
});

JSBin Example

Answer 3

Answer №2

One potential solution is to utilize a script provided by a plugin. You can find the source of this script at: https://gist.github.com/schmidsi/1276118

I have incorporated this script into a JSFiddle, allowing you to visualize and compare the body content with the background image.

var url = $('body').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
var bodyHeight = $('body').height();
var bodyWidth = $('body').width();

bgImg.hide();
bgImg.bind('load', function()
{
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

    alert("Body height: " + bodyHeight + "px, Body width: " + bodyWidth + "px");
    alert("Image height: " + imgHeight + "px, Image width: " + imgWidth + "px");
});
$('body').append(bgImg);
bgImg.attr('src', url);

Answer 4

One potential solution is to utilize a script provided by a plugin. You can find the source of this script at: https://gist.github.com/schmidsi/1276118

I have incorporated this script into a JSFiddle, allowing you to visualize and compare the body content with the background image.

var url = $('body').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
var bodyHeight = $('body').height();
var bodyWidth = $('body').width();

bgImg.hide();
bgImg.bind('load', function()
{
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

    alert("Body height: " + bodyHeight + "px, Body width: " + bodyWidth + "px");
    alert("Image height: " + imgHeight + "px, Image width: " + imgWidth + "px");
});
$('body').append(bgImg);
bgImg.attr('src', url);

Resizing background images to their original size using jQuery

Answer №1

Answer №2

Similar questions

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click

Retrieve Wikipedia API JSON information using jQuery

Guidance on uploading a file with AJAX in PHP following the display of a Sweet Alert

The minimum height increases as the inner divs expand

"Combining Angular and jQuery for powerful web development

Assistance required for posting Jquery files

Update the Div when Fancybox is Closed

Challenges with Hangman in JavaScript

Trigger a warning pop-up if a selection has not been made in a dropdown menu using jQuery

Stop the page from scrolling

Can a file object be transmitted using this method?

adjusting iframe dimensions for iPads

"Efficiently fetching and handling multiple rows with

What could be causing the disappearance of the replaced div content after a refresh?

Steps to ensure my collapsible is open from the start

Unable to establish the origin for an element using JavaScript

Incorporate a dropdown menu based on the selection made in another dropdown menu

What is the process for adding a custom header when making an ajax call in a datatable?

What is the procedure for configuring this.class to perform a specific action?

Creating markers for every value in a table using Google Maps API v3