CODEWITHSUNDEEP
htmlcss
Pro Dev
Pro Dev

Reputation: 684

Is there a way to set a minimum background size in css/html

Is it possible to set a minimum background size in a container which is set to percentage (100%), the background is set to cover the whole container (div).

When you re-size the browser window the container (div) re-sizes because it is set to 100%, and same with the background image also re-sizes.

Here is i want to try is is possible to set a minimum background size because when you resize the browser window to smaller the background cannot be seen.


Here is my sample code:

HTML

<div class="fullwidth_wrapper fullbg">

    <div class="content">
        <h3>How to set minimum background size</h3>
    </div>

</div>

my css

.fullwidth_wrapper {
    width: 100%;
    height: 720px;
}

.fullwidth_wrapper.fullbg {
    background: url('http://dummyimage.com/1080x620/d1d1d1/0064c2.png') no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    display: block;
    background-size: 100%;
    /* can we use something like min-width or like min-background-size??? */
}



check my JSFIDDLE here http://jsfiddle.net/gqm2rbgn/7/

Upvotes: 1

Views: 583

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28553

use background-size:50% 50% or something like that instead of cover - this will size your background to be smaller

If you don't want it to be seen on smaller devices then add a media query that says background:#fff repeat or something along those lines like this:

@media screen and (max width:480px){background:#fff repeat;}

Upvotes: 1

Related Questions