Question

I am looking to have a logo extend into a black bar that will run along the entire top of the screen as seen in the example below:

My original thought was that there would be a way to add CSS to the body to just do a border on the top similar to:

body {
    border-top: .5em solid #000;
}

Since I don’t believe that’s the solution, I was thinking something along the following HTML, but haven’t been able to get it to work.

<div id="topBlackBar">
    <div class="container"><!--Per Bootstrap-->
        <div class="span2">
            <img src="img/logo.png" alt="Bachner+Co Logo" />
        </div>
    </div>
</div>

But then I couldn’t figure out how to get the logo to go on top of it.

I am using Twitter Bootstrap 2.2.2 as a framework in building this. I would prefer to do this mostly in CSS and not have to use a black image if possible.

Thank you all for your time and assistance in this. I greatly appreciate it!

Answer 1

How about this: Set a top border and then a negative margin of the same amount. Your image will need to be transparent, unlike the Google logo I used in the example.

Demo

#topBlackBar {
  border-top: 50px solid #000;
}

#logoContainer {
  margin-top: -50px;
}

<div id="topBlackBar">
  <div class="container" id="logoContainer"><!--Per Bootstrap-->
    <div class="span2">
      <img src="https://www.google.com/logos/2012/birthday12-hp.jpg" alt="Bachner+Co Logo" />
  </div>
</div>