How to adjust bootstrap's navbar height - html

Question

I am new to bootstrap and I'm trying to understand the navbar, I tried putting a background image to the navbar setting an ID to it:
HTML:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tutorial</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
#myNavbar{
background-image:url(../images/image1.png);
background-size:cover;
}
what I am wondering is if there's a way to resize the height of the navbar according to the size of image1.png...
The image has an initial size of 1280x150 px and ends up being 400x50, and I want the bar to have the same sizes, because as it is right now, it starts on 1280x50 and ends up in 400x50, which crops the image.

Answer 1

I'm having trouble understanding..are you asking for the navbar to be 400px tall or 1280px tall?
Get rid of your mention of the #myNavbar ID altogether and try this:
.navbar-default
{
background-image:url(../images/image1.png);
background-size:cover;
height:150px;
}
#media only screen and (max-width: 400px){
.navbar-default
{
background-image:url(../images/image1.png);
background-size:cover;
height:50px;
}
}