Full Body Background with Twitter Bootstrap

Full body background with Twitter Bootstrap

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+.

Twitter Bootstrap - Full width background (image)

That margin you're seeing is due to the fact that the .row class part of the grid system removes 20px from the left to accommodate the span classes inside each row; that class reads as follows:

.row {
    margin-left: -20px;
}

You can circumvent that by just wrapping your .container div with another container with the background color of your choice, like so:

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}

Insert a background image in CSS (Twitter Bootstrap)

Put the background url in quotes.

It should be background: url('background.png');

See here for working demo.

You also have an issue with the background-repeat line missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.

Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg when it should have been ../background.jpg (2 dots, not 3).

Twitter Bootstrap Responsive Background Image

The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.

Demo Fiddle

HTML

<div></div>
<div>More Content</div>

CSS

html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
div:first-of-type {
    height:100%;
    width:100%;
    background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
    background-size:cover;
    background-position:center center;
}
div:last-of-type {
    background:green;
    position:relative;
    color:white;
    height:100%;
}

Twitter Bootstrap Responsive Background-Image inside Div

I found a solution.

background-size:100% auto;

Twitter Bootstrap body background with CSS3 Animation

thanks for adding the Fiddle. I fiddled around with it and got the background to position itself on the bottom.

When you are setting 0 as the position value you are talking about to Top or the Left ... 0 0 is top left.

Check this fiddle

body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333333;
   background: #A9D0F5 url("http://i43.tinypic.com/fcmjv4.png") repeat-x fixed center bottom;
   animation: animatedBackground 40s linear infinite;
   -ms-animation: animatedBackground 40s linear infinite;
   -moz-animation: animatedBackground 40s linear infinite;
   -webkit-animation: animatedBackground 40s linear infinite;
}
@-keyframes animatedBackground {
  from { background-position: center bottom; }
  to { background-position: 100% bottom; }
}
@-webkit-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}
@-ms-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}

It's working for me in Chrome on PC, let me know if it works for you. Cheers.

Changing Twitter Bootstrap's body background changes everything - Rails

Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/

Otherwise, not that hard of an override:

.nav-stacked > li > a {
  background-color:#ffffff;
}

​
But still seems like something that should be in there as an option.

JSFiddle

How to change the default background color white to something else in twitter bootstrap

You can overwrite Bootstraps default CSS by adding your own rules.

<style type="text/css">
   body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>

---

Related Topics