How to set background across this bar - html

Question

I am trying to set the background to go horizontally across this bar to be behind the logo and nav
Here is the HTML
<!--NAV-->
<div class="header">
<div class="title">
<img src="img/logo.png">
</div><!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
and here is the css
.title
{
display:inline;
float:left;
margin:0 auto;
}
.nav
{
font-size:20px;
color:#0F3;
display:inline;
float:right;
margin:0 1.7%;
padding:1% 4% 0;
}
ul
{
display:inline;
float:right;
list-style:none;
}
li
{
display:inline;
}

Answer 1

You can modify .header class.
Keep in mind that floating divs don't affect the size of the surrounding element. So you can use overflow: auto; in header class to make the surrounding element take the floating elements in consideration:
Example
.header {
background: url(http://lorempixel.com/800/100/abstract/);
width: 100%;
overflow: auto;
}
img {
padding: 12px;
}
.title {
display: inline;
float: left;
margin: 0 auto;
}
.nav {
font-size: 20px;
color: black;
text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
display: inline;
float: right;
margin: 0 1.7%;
padding: 0 4%;
padding-top: 1%;
margin-bottom: 0;
}
ul {
display: inline;
float: right;
list-style: none;
}
li {
display: inline;
}
<div class="header">
<div class="title">
<img src="http://lorempixel.com/100/40/people/">
</div>
<!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>