CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
xodebox95
xodebox95

Reputation: 93

Boostrap background image

May I ask how is it possible for me to get a properly bootstrap 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;
}

Upvotes: 2

Views: 451

Answers (4)

Durgesh Dangi
Durgesh Dangi

Reputation: 213

Your code is right, but You should do one more thing:

Use some content on the background image(Like h1, p, button) and use padding/margin to manage it. If you need, you can use some media query for mobile and tablet.

Upvotes: 0

frnt
frnt

Reputation: 8795

Try this change your background-size to this,

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

Upvotes: 1

Martijn Ven van de
Martijn Ven van de

Reputation: 83

You gave your image a height of 850 px. This isn't a responsive size. Change it to 100% so that it will fit the whole screen. Something like this:

Height: 100%;

Hope this works.

Upvotes: 0

Fil
Fil

Reputation: 8873

This may not be the direct answer to problem, because it tried to put your style inline. and so far it works fine

This is the simple code I use to implement.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css\bootstrap.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
      #BGImage {
        background: url('image/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;
      }
    </style>
    <script type="text/javascript" src="jquery-1.12.2.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
  </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>

Maybe from here it may help you figure out the problem

Upvotes: 0

Related Questions