Background image is not scaling in mobile devices

Question

Hi i am trying to scale down a background image which is set in a specific div to scale down for mobile screen like iphone or android but it is not scaling down instead it shows only a specific part of large image while i want that whole image decreases in size and readable

here is online link where you can verify and see the styling

http://houseofskills.pk/house-of-skills/website/index

<section id="intro">
            <div class="black-overlay"></div>
            <div class="container valign">
                <div class="row">
                    <div class="col-md-12">

                    </div>

                    <div class="col-md-12 text-center">

                    </div>

                    <div style="font-weight: bold; color:black;" class="col-md-6 col-md-offset-3 text-center">

                    </div>

                </div>
            </div>
        </section>

<style>
.valign{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.container {
    position: relative;
}
</style>

Also i am using backstrech to set the background image

    <script>
            $("#intro").backstretch("<?php echo base_url('assets/img/banner.jpg');?>");
        </script>

Answer 1

Backstretch is setting inline styles that force your image to display at its maximum width at all times.

Using a Jquery plugin like Backstretch to set a background image is quite unnecessary. It would be far more efficient and clean to set the background image in your CSS like so:

HTML:

<section id="intro">
    <div class="black-overlay"></div>
    <div class="bg"></div>
    ...
</section>

CSS:

...
#intro > .bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url( '/house-of-skills/assets/img/banner.jpg' );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
...

With that being said, if you really really need to use backstretch to set the background image, you can overwrite the inline CSS after it is initialised with:

<script>
    $("#intro").backstretch("<?php echo base_url('assets/img/banner.jpg');?>");
    $("#intro > .backstretch img").css( {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        width: '100%',
        height: 'auto',
        margin: 'auto'
    } )
</script>

This takes advantage of the fact the backstretch is using absolute positioning. It sets all the edge parameters to 0 and then gives a margin of auto which will horizontally and vertically centre an absolute element. Again, this is a dreadfully inefficient way to set a background image.