Full body background with Twitter Bootstrap

Question

I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset='UTF-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
        <title>Bootstrap Issue</title>
        <style>
          body { background: black; }
          .container { background: white; }
        </style>
    </head>
    <body>
        <div class="container">
          <h1> Hello, World!</h1>
        </div>
    </body>

</html>

How can I get the body to take up the entire screen?

score 37 · Accepted Answer · edited May 23 '17 at 10:27

37

You need to either add this:

html { background: transparent }

Or, set the "page background" (background: black) on html instead, which is fine to do.

Why? Inside Bootstrap, there's this:

html,body{background-color:#ffffff;}

(bear in mind the default background value is transparent)

For more information on why this matters, see: What is the difference between applying css rules to html compared to body?

Note that this is no longer an issue with Bootstrap 3+.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 27 '11 at 13:14

thirtydot

224,678
48
389
349

Presumably, he's already overriding bootstraps color for the background. – Evan Carroll Nov 06 '14 at 21:33
@EvanCarroll: Yes he was, but it wasn't working for him. You're not understanding the problem this question was asking about. – thirtydot Nov 07 '14 at 12:12

score 8 · Answer 2 · answered Sep 27 '11 at 12:18

8

Set the height of html and body to be 100% in the CSS.

html, body { height: 100%; }

Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.

answered Sep 27 '11 at 12:18

Ben Clayton

80,996
26
120
129

This almost works, but if you've got a padding-top:60px (to prevent the navbar from appearing over the container at the top), this creates a 60px extra height at the bottom, which doesn't get the background. How do we do "100%-60px" in css? – aalaap Sep 17 '12 at 06:41
2

EDIT: This is doable using jQuery - $("body").css("height", ($(window).height()-60)+"px"); Does anyone have a pure-CSS method to achieve this? – aalaap Sep 17 '12 at 06:51
html, body{ height: 100%; /* MAKES SURE THIS ONE IS FIRST */ min-height: 100%; } – DrewRobertson93 Apr 28 '15 at 21:28

score 5 · Answer 3 · answered Jun 07 '13 at 02:33

/* here is a pure CSS solution */

<style type="text/css">
      html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }

      #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }

      #wrapper {
        position: relative;
        width: 800px;
        min-height: 400px;
        margin: 100px auto;
        color: #333;
      }

      a:link, a:visited, a:hover {
        color: #333;
        font-style: italic;
      }

      a.to-top:link,
      a.to-top:visited, 
      a.to-top:hover {
        margin-top: 1000px;
        display: block;
        font-weight: bold;
        padding-bottom: 30px;
        font-size: 30px;
      }

    </style>
    <body>
  <img src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

score 0 · Answer 4 · edited Jul 01 '13 at 21:52

0

<style>
      body { background: url(background.png); }
      .container { background: ; }
</style>

this works for a background image if you want it

edited Jul 01 '13 at 21:52

Robert Longson

118,664
26
252
242

answered Jul 01 '13 at 21:37

cflo

1

score 0 · Answer 5 · answered Aug 03 '15 at 05:49

0

best solution would be

.content{
    background-color:red;
    height: 100%;
    min-height: 100vh;
}

its automatically take veiwport height(vh) in bootstrap.

answered Aug 03 '15 at 05:49

Bharat Parmar

1,842
2
18
22

Full body background with Twitter Bootstrap

5 Answers5

Linked