0

I need a div getting the height of its dynamic background-image after a specific window width and specific height of the div.

So when the div (.header-block-wrapper) is >= 630px and the window width >= 978px, the div needs to be as heigh as its background-image is.

The code script for detecting the background-image height i got here: How do I get background image size in jQuery?

The whole script also has to fire on resize that is why i used ( $(window).resize...).

But it is not working... any idea?

$(window).load(function() {
        $(function(){
            var innerHeight = $('.header-block-wrapper').height();
            var innerWidth = $('.header-block-wrapper').width();
            var backgroundHeight;

            $(image).load(function () {
                backgroundHeight = image.height;
            });

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


            $(window).resize(function(){
                if( innerHeight >= 630px && innerWidth >= 978px) {
                    $('.header-block-wrapper').css("height",backgroundHeight);
                }else {
                    $('.header-block-wrapper').css("height","auto");
                }


            });
        });
    });

EDIT// I fixed it:

Alright i fixed it, instead of using an background-image, is used an image within the div as background. This image has an 100% width, auto height and absolute.

Its just easier to get the height of an image then a background-image.

jQuery(window).load(function() {
    jQuery(window).resize(function(){
        var innerHeight = jQuery('.header-block-wrapper').height();
        var innerWidth = jQuery('.header-block-wrapper').width();
        var imageHeight = jQuery('.header-block-image').height();

            if( innerHeight >= 630 && innerWidth >= 978) {
                jQuery('.header-block-wrapper').css("height",imageHeight);
            }else {
                jQuery('.header-block-wrapper').css("height","auto");
            }


    });
});
Community
  • 1
  • 1
Jonny Vince
  • 487
  • 2
  • 9
  • where is image defined? what does $(image) select? – iGanja Mar 16 '13 at 05:34
  • As an aside, just in case it adds an extra dimension to the problem for the OP or anyone reading the question, it is possible to constrain the background image size in CSS3 to match the container using the background-size property (https://developer.mozilla.org/en-US/docs/CSS/background-size). Depending on the use case, this may remove the need to resize the container. – pwdst Mar 16 '13 at 12:14

1 Answers1

0

Why not try using CSS to achieve this.

If you have a your minimum target image size to be "width = 800px" and "height = 600px" then other images incremental from above this specified targeted sizes. Do 

.header-block-wrapper {
min-width:800px;
min-height:600px;
margin: auto;
}

Assign it the default height and width you require then when you dump in anything greater it will expand to fit if you have images above this default specified size in your CSS.

OmniPotens
  • 1,125
  • 13
  • 30
  • i dont get how this should work, cause if the div height is 630px, it should be as high as its background-image and than resize dynamicly with the background-image. – Jonny Vince Mar 16 '13 at 04:47
  • A background image will not force anything to size, so this cannot be done the way the OP wants using just CSS. – iGanja Mar 16 '13 at 05:26
  • There's no image inside of the class. The class is only acting as a container. Well, if he intent's adding a background image to it... I guess he need to use JavaScript solution then to create the container needed. – OmniPotens Mar 16 '13 at 05:34
  • no its not... but you gave me an idea cause you are talken auf image-size. – Jonny Vince Mar 16 '13 at 05:40
  • My solution was simply to create a div and assign a default min-width and min-height to it. When you have a background image inserted into the div, it will check for the new width and height if higher than the defined default values then increment to fit. That's all. – OmniPotens Mar 16 '13 at 05:45