2

Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.

I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:

body {
    font-size: 16px;
    padding-top: 10px;
    background-image: url("../assets/back14.gif");
}

This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.

Can I fix this behaviour or apply the background in a better way?

Matt Wheeler
  • 197
  • 1
  • 2
  • 8
  • Where do you include your css? Before or after the bootstrap.css? – Steve Valliere Aug 31 '12 at 16:52
  • It's in the asset pipeline with defaults so alphabetical so it comes after. My separate file overwrites things fine, including the body background. More specifically though, it also changes the background of this nav element
      – Matt Wheeler Aug 31 '12 at 17:09
    • I've read elsewhere that bootstrap defaults backgrounds to transparent? Think it's just showing through? Seems strange to have to edit all the background colours for things like this if you edit the body background though. – Matt Wheeler Aug 31 '12 at 17:11
    • This might be related: http://stackoverflow.com/questions/7568931/full-body-background-with-twitter-bootstrap – Nick Sep 01 '12 at 05:49

    1 Answers1

    0

    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

    merv
    • 67,214
    • 13
    • 180
    • 245