Clever Geek Handbook

How do I set a background image as the background size: contain on boot, but not resize when the window is resized?

Is there a way to do this? I am creating an HTML application and I do not want the background image to change when the soft keyboard is open. Thank!

+3


source to share


3 answers 


.element{
    /*important*/
    width: [you-width];
    height: [you-height];
    /*image*/
    background-image: url(some.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    /*optional*/
    position: relative;
    background-attachment: fixed;
    overflow: hidden;
}


0


source


you can use JS .. when launching keyboard display. you add a class to this element and set a fixed value for BG



0


source


Thanks guys, I solved it like this:

$scope.getImageSize = function(div){
var backgroundImage = new Image();
backgroundImage.src = $(div).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

backgroundImage.onload = function() {
    var width = this.width;
    var height = this.height;

    var object = $(div);

    /* Step 1 - Get the ratio of the div + the image */
    var imageRatio = width/height;
    var coverRatio = object.outerWidth()/object.outerHeight();

    /* Step 2 - Work out which ratio is greater */
    if (imageRatio >= coverRatio) {
        /* The Height is our constant */
        var coverHeight = object.outerHeight();
        var scale = (coverHeight / height);
        var coverWidth = width * scale;
    } else {
        /* The Width is our constant */
        var coverWidth = object.outerWidth();
        var scale = (coverWidth / width);
        var coverHeight = height * scale;
    }
    var cover = coverWidth + 'px ' + coverHeight + 'px';
    $localStorage.image = {width: coverWidth + "px", height: coverHeight + "px"};
    $('.pane').css('backgroundSize', $localStorage.image.width + " " + $localStorage.image.height);
    return $localStorage.image;
};

}

Since this is a mobile app and I am blocking orientation, I am assuming the width and height will not change, I change the background-size

same width and height with the changed width from background-size: contain

.

0


source






More articles:


All Articles