Starting a background image below navbar in Twitter Bootstrap

Question

Relative CSS/bootstrap newbie.

I've spent a while trying to get a background image to integrate with Twitter Bootstrap using the first method on this CSS Tricks page. I wound up using "body" as the CSS tag because HTML just... didn't work. While everything is working fine in general, the image is starting "behind" the top navbar and then extending downward, so the top is hidden behind the black navbar

I've tried using margin-top to align the top of the background image with the bottom of the navbar, but that also moves the container and all further content down as well (obviously, since I'm putting a margin on the full body of the page).

I've also tried creating a unique class for the background image (backgroundimage), and putting a div immediately inside the body tag and closing the div right before the html close tag, but once again, adjusting it adjusts all the page content, not just the background image.

Moving the div for the background-image below the navbar confines it to the active "container" space, so the background-image now only exists in the middle third of the screen.

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

Given the resizing properties of background-image, the hacky solution of just changing the image itself to create a space at the top obviously won't work. How do I CSS that background-image down below the navbar?

Answer 1

Use background-position. It takes two values: one for the x axis, the other for the y axis. In your case it'd be something like:

background-position: 0 Y; where Y would be the height of the navbar.

Answer 2

late to the party but thanks to this answer I got my page to display as I wanted to, this is my CSS code. hoping to help any fellow newbie

header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}