Menu
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?
291
Just add . bg-img class on your <img> element and .has-bg-img class to parent element that you want to apply a background image. Images are part of the DOM and are transformed into CSS background-image after they are fully loaded.
Responsive designWith Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.
We can add background color to a div by simply adding class “bg-primary”, “bg-success”, “bg-danger”, “bg-info”, and many more as shown in the following examples.
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+.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
