jQuery - possible to resize background-image to a

Question

I'm in a situation where I urgently need to fit a background image of a div to a certain size. Does anyone know if this is possible with jQuery? I know the size it needs to be, it doesn't have to resize with the size of the div. 35,000 images have been scaled to the wrong size and it needs to go live so resizing the images isn't an option!

Any advice appreciated!

EDIT: I'm just seeing whether we're able to alter the HTML to take the background image out of the DIV and put it in a separate absolutely positioned div at the same with an IMG tag in it... the IMG tag can then be resized with CSS.

Answer 1

With css:

#myDiv {
            background: transparent url(../../Images/2.jpg);
            background-size: 400% 400%; 
        }

Note that "400% 400%" gives the width and height. Can also use "px" or "em", a combination, auto etc etc. See the CSS3 spec for more of those details: http://www.w3.org/TR/css3-background/#the-background-size

With jquery you can change the background-size like so:

$('#myDiv').css({
        'background-size': '200% 200%' 
    });

Answer 2

Please read this article

 #img.source-image {
      width: 100%;
      position: absolute;    
      top: 0;
      left: 0;
}

Answer 3

You can use CSS3 to change the background size. The browsers that have this feature implemented are Opera, Safari, Chrome, Firefox, Konqueror and IE9:

.myClass
{
    -o-background-size: 200px 50px;
    -webkit-background-size: 200px 50px;
    -khtml-background-size: 200px 50px;
    -moz-background-size: 200px 50px;
    background-size: 200px 50px;
}

Not sure about the jQuery implementation of background size.

In this case, maybe this article will help you.

Answer 4

Background images can only be scaled with features in the CSS 3 drafts, which do not yet have wide support in browsers.

JavaScript could parse the CSS, find the background-image, generate a foreground image (<img> for it), style it to be absolutely positioned behind the content and scale it … but that is a lot of work.

The easiest and most reliable solution would be to knock up a quick script using ImageMagick (I'd probably use bash for this, but PHP or any other programming language are options) to programatically resize all 35,000 images on the server. (This might also be to be the fastest approach too).

Answer 5

If the background is used as a background-image, you can't set them to 100%. This can be found a 1000 times on SO here I think. So that would go into some nightly batch to resize them all.

You could also create some code to put an <img> tag inside the div. The image can then be scaled to 100%. To do this, you have to ask things to your CSS, or div like so:

$('div.niceImage').each(function()
{
    var imUrl = $(this).style('background-image'); // if not in style itself, we should ask it to the CSS rules. Don't know if jQuery does this for you.
    $(this).prepend('<img style="position:absolute;width:100%;height:100%;" src="' + imUrl + '" />');
});