Background image clipping on small size

Question

I am using Bootstrap to create a grid layout. I have made a row with some columns in it and the columns have their background images. The problem is that when I shrink the screen size, The images get clipped.

<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/days.png) no-repeat; background-size: auto 100%; background-
                        position: center center; max-width: 100%;">
    <div class="days_dash">
        <div class="digit">
            <div class="top" style="display: none;">8</div>
            <div class="bottom" style="display: block;">8</div>
        </div>
        <div class="digit">
            <div class="top" style="display: none;">3</div>
            <div class="bottom" style="display: block;">3</div>
        </div> <span class="dash_title">days</span>

    </div>
</div>
<!-- /Days -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Hours -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/hours.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="hours_dash">
        <div class="digit">
            <div class="top" style="display: none;">2</div>
            <div class="bottom" style="display: block;">2</div>
        </div>
        <div class="digit">
            <div class="top" style="display: none;">0</div>
            <div class="bottom" style="display: block;">0</div>
        </div> <span class="dash_title">hours</span>

    </div>
</div>
<!-- /Hours -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Minutes -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/minutes.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="minutes_dash">
        <div class="digit">
            <div class="top" style="display: none;">3</div>
            <div class="bottom" style="display: block;">3</div>
        </div>
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 26.97222222222222px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">6</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 38.62196180555556px;">7</div>
        </div> <span class="dash_title">minutes</span>

    </div>
</div>
<!-- /Minutes -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Seconds -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/seconds.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="seconds_dash">
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 37.4375px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">5</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 27.9931640625px;">0</div>
        </div>
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 37.4375px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">9</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 27.9931640625px;">0</div>
        </div> <span class="dash_title">seconds</span>

    </div>
</div>
<!-- /Seconds -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>

How can I stop it from not getting clipped but get more smaller?

Here's a fiddle.

What exactly do you want it to do? Resize the background image? Will your font resize as well? — Praxis Ashelin, Mar 25 '14 at 16:24

score 0 · Answer 1 · answered Mar 25 '14 at 16:28

0

You can have the background-image automatically resize with background-size: contain.

Fiddle here: http://jsfiddle.net/Pm2nh/2/

answered Mar 25 '14 at 16:28

Praxis Ashelin

5,137
2
20
46

And what about the font size? – Mohammad Areeb Siddiqui Mar 25 '14 at 16:30
I'm afraid it isn't possible in css, at least not that I know of. You'll have to do so with javascript. – Praxis Ashelin Mar 25 '14 at 16:30
What sort of script do I need for that? – Mohammad Areeb Siddiqui Mar 25 '14 at 16:31
Javascript is a programming language. But as for CSS, it can be done with media queries. Take a look here: http://stackoverflow.com/questions/15649244/responsive-font-size – Praxis Ashelin Mar 25 '14 at 16:32
Viewport-units may also prove a solution: http://css-tricks.com/viewport-sized-typography/ – Praxis Ashelin Mar 25 '14 at 16:34
I know javascript but i was asking about the logic. :P – Mohammad Areeb Siddiqui Mar 25 '14 at 16:34
@MohammadAreebSiddiqui Try it yourself first. You should be able to find enough info on google. – Praxis Ashelin Mar 25 '14 at 16:36

Background image clipping on small size

1 Answers1