CODEWITHSUNDEEP
htmlcssbackground-image
Clam
Clam

Reputation: 945

CSS Background Naturaly Scaling content

I am moving from a desktop background at 100% and changing to a mobile background once I hit a tablet/mobile size. My problem is as I go down in size, the content starts to exceed the background length. 

#bg {
background-image: url('images/bg.gif');
background-size: 100%  ;               
background-repeat: no-repeat;    
position: relative;
height: 100%;
}

Then going to 992px. This image is 992px width and 1425px height

#bg {
background-image: url('images/mobile/mobile-bg.jpg');
background-size: 100% auto; 
}

HTML structure

<div class="row main-content" > 
    <div class="col-xs-12" id="bg">
        <div class="row">   
            <div class="col-xs-12 ">
                <div class="row">
                    <!-- content here -->
                </div> 

            </div> 
        </div>   
    </div>  
 </div> <!-- row main-content end -->

I don't get why it is able to scale and keep the content until it gets smaller (e.g. the mobile size)

What am I missing? I don't want to stretch the image. I want to maintain the right ratio. Do I just need an bg image with even larger height?

Upvotes: 0

Views: 78

Answers (2)

user1452407
user1452407

Reputation: 110

I dont quiet exactly get what your your tryin to achieve you may want to look at this http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

Chances are this is what you want, as it will scale and crop the picture according to device size.

 .bg{
    background:url(imgurl/picture.jpg) no-repeat center center;
    background-size: cover;
}

This personally what I'd use. Most likely using 3 different appropriate sized images in media queries for phone, large tablet, large desktop. Not because the image wouldn't scale, but to save bandwidth for smaller devices.

Upvotes: 1

Anton
Anton

Reputation: 113

I believe you're looking for background-size of either cover or contain. MDN has more on that here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Cover will make the background image as small as possible while maintaining the aspect ratio and contain will make sure the background image is as large as possible while maintaining ratio.

If you need to support IE below version 9, you'll need some sort of a polyfill.

#bg {
    background-image: url('images/bg.gif');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    height: 100%;
}

Upvotes: 2

Related Questions