css - HTML background image with 100% height preserving aspect ratio -


i trying image fill page using bootstrap css template , 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 image fills 1/3 of height of page when browser width small , 1/10th of page when browser width made large. how can entire height filled?

just need set height 100vh, means fill height value of 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


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -