CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Racing Tadpole
Racing Tadpole

Reputation: 4360

How do I overlap an image in front of twitter bootstrap's top navbar?

I want to place a banner image on my Twitter Bootstrap page, with the top of the image overlapping and in front of the top navbar.

My html code is shown below. It works for small screen widths, but for wider screens, the top of the image appears behind the navbar. I am using Bootstrap v2.2.2.

Any ideas how to make this work for all screen sizes? Much appreciated!

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
       ...
    </div>
    <style type="text/css">
        .mypic {margin: -120px 0 -20px 10px;}
    </style>
    <div class="container">
        <div class="mypic">
            <img src="..." width="300"/>
        </div>
    </div>
    ...
</body>

Upvotes: 0

Views: 9383

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

I can't quite picture where you are heading with this, but is this a start?
http://jsfiddle.net/panchroma/xdv9m/

You might need to use media queries to refine the results for small window sizes.

CSS

.mypic {
margin: -120px 0 -20px 10px; /* play with these to position the image */
position:absolute;
z-index:100;
width:300px;
}

Good luck!

Upvotes: 2

Related Questions