xodebox95 xodebox95 - 5 months ago 18
HTML Question

Boostrap background image

May I ask how is it possible for me to get a properly boostrap background image called bgImage. Currently, my background does not fit to the size of when the window is resized.

<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="BGImage">
<div class="container" id="tabcontainer">
<div class="row">
//All the content i.e text field, text box are inside
</div>
</div>
</div>
</body>
</html>


style.css



<body>
background: none;
</body>
#BGImage {
background: url(../images/1.jpg) no-repeat scroll 0 0 transparent;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
height:850px;
}

Answer

Try this change your background-size to this,

#BGImage {  
  background-size:100% auto;
}