Boostrap background image

Question

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;
}

Maybe duplicate of: [How to use responsive background image in css3 in bootstrap](http://stackoverflow.com/questions/18612651/how-to-use-responsive-background-image-in-css3-in-bootstrap) — Martin, Jun 26 '16 at 10:05

score 1 · Accepted Answer · answered Jun 26 '16 at 11:44

1

Try this change your background-size to this,

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

answered Jun 26 '16 at 11:44

frnt

8,455
2
22
25

hi, this works :). But, there is still some space in between when i resized it. Is there any way to remove the white space? – xodebox95 Jun 26 '16 at 12:31
If it's at top then that might be because of margin which you have added. – frnt Jun 26 '16 at 12:34

score 0 · Answer 2 · answered Jun 26 '16 at 10:03

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

no, it doesn't work. It only displays half the image when i resize the window — xodebox95, Jun 26 '16 at 10:13
Maybe you should check the parent style, it may affect on div#BGImage — Fil, Jun 26 '16 at 10:14
the current parent style is the body. But body only has: body { margin-top: 22px; background: none; } — xodebox95, Jun 26 '16 at 10:18

score 0 · Answer 3 · answered Jun 26 '16 at 10:19

0

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.

answered Jun 26 '16 at 10:19

Martijn Ven van de

83
2
10

score 0 · Answer 4 · edited Apr 14 '17 at 09:32

0

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.

edited Apr 14 '17 at 09:32

Tony Babarino

3,355
4
32
44

answered Apr 14 '17 at 09:02

Durgesh Dangi

215
2
13

Boostrap background image

style.css

4 Answers4