CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Don Smythe
Don Smythe

Reputation: 9804

HTML background image with 100% height preserving aspect ratio

I am trying to get an image to fill a page using a bootstrap css template and additional custom css.

html:

<head>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="cover.css" />
</head>
<body>
    <div class="my_banner">
    <div class="col-lg-8">
    <h3>Title</h3>
    </div>
    <div class="col-lg-4 ">
    <a class="btn btn-success">Ok</a>
    </div>
    </div>
</body>

cover.css:

.my_banner {
    padding-top: 50px; 
    text-align: left;
    color: #f8f8f8;
    background: url(image.png); 
    max-width: 100%;
    height: auto;   
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}

However the image only fills about 1/3 of height of page when browser width is small and about 1/10th of the page when browser width is made large. How can I get the entire height always filled?

Upvotes: 1

Views: 811

Answers (2)

sheetal
sheetal

Reputation: 565

you can also use background-size property fir this like:

` .my_banner {

padding-top: 50px; 

text-align: left;

color: #f8f8f8;

background: url(image.png); 

background-size: 100% 100%;

background-repeat: no-repeat;

}`

Upvotes: 0

Josef El Bez
Josef El Bez

Reputation: 212

Just need to set height to 100vh, that means you will fill all the height value of your browser

.my_banner{
    height: 100vh;
    background: url(image.png) center; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
}

Working codepen example: http://codepen.io/anon/pen/rLNyvw

Upvotes: 3

Related Questions