0

My navbar has a padding top and bottom of 70px. Height wise it's a bigger navbar than usual. I'm trying to use a photo to fill this entire space as a background for my navbar but it fills only a very tiny space right down the middle and the rest of the navbar stays white. How can I fill the entire space of my navbar with my photo?

.navbar {
	text-transform: uppercase;
	margin-bottom: 0px;
}

.navbar-inner{
  background-image: url('../img/mixer.jpg');
  background-repeat: repeat-x;
}

.navbar-default {
	padding-top: 70px;
	padding-bottom: 70px;
	border-color: #1E1E20; /*light black*/
}

.navbar-brand {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2px;
}

ul.nav a { 
	color: #1abc9c !important; /*teal*/
}

ul.nav a:hover,
ul.nav a:focus { 
	color: #7b7b7b !important; /*lightest grey*/ 
} 

.navbar-default .navbar-toggle {
	border-color: transparent;
}
<div class="navbar navbar-default navbar-static-top" role="navigation">
			<div class="navbar-inner">
			  <div class="container">
				  <div class="navbar-header">
					  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						  <span class="icon-bar"></span>
						  <span class="icon-bar"></span>
						  <span class="icon-bar"></span>
					  </button>
					  <a href="index.html" class="navbar-brand">KEN COOPER</a>
				  </div>

				  <div class="collapse navbar-collapse">
					  <ul class="nav navbar-nav navbar-right">
						  <li><a href="#">About</a></li>
						  <li><a href="#">Shows</a></li>
						  <li><a href="#">Clients</a></li>
						  <li><a href="#">Contact</a></li>
					  </ul>
				  </div> <!-- end navar collapse -->
			  </div>
			</div>
		</div>

1 Answer 1

0
.navbar {
    text-transform: uppercase;
    margin-bottom: 0px;
      background: url('http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Working fiddle http://jsfiddle.net/52VtD/8979/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.