In this jsfiddle I have created an example on how to create a custom image header for medium and small devices.
http://jsfiddle.net/afarris/U87eb/15/embedded/result/
The key to this header is it only uses two images. The main logo and a simple 1px slice. Since the the logo is high resolution it can be scaled down depending on your media queries. This makes maintaining the header easy since you don’t have to deal with multiple size/files graphics.
The logo is 144×144. The important thing to realize is the ratio. This logo is a 1/1 ratio so scaling down is easy. As long as your graphic has high physical resolution, it will look good on your retina device.
The header will be 100px tall if between 479px and 991px. If under 479px it will be 50px tall.
A final item to mention is I adjusted the @grid-float-breakpoint from @screen-sm-min to @screen-md-min in http://getbootstrap.com/customize/. This is to allow the nav to collapse on medium devices.
body {
padding-top: 50px;
}
.navbar-header {
background-image:url("bootstraplogo.png", "bootstraplogoslice1.png")
background-repeat:no-repeat, repeat-x;
background-position:center;
}
@media only screen and (min-width:479px) and (max-width:991px){
body {
padding-top: 100px;
}
.navbar-header {
background-size: auto 100px, 1px 100px;
}
.navbar-header {
height:100px;
}
}
@media only screen and (max-width: 479px) {
.navbar-header {
background-size: auto 50px, 1px 50px;
}
.navbar-header {
height:50px;
}
}
Abraham Farris 
Leave a Reply