Ik gebruik voor een project wordpress twig templates en bootstrap.
Ik heb de navigatie met header afbeelding in een .container gedaan. Zodat op de desktop, de breedte evenveel is als de content. Op tablet en mobiel, wil ik dat de header/navigatie gewoon 100% breedt is. Gek genoeg hoefde ik daar niets voor te doen in een oud project, maar in mijn huidige project, zodra ik overschakel naar tablet of mobiel. Dan is de breedte van de navigatie niet zo breed als het scherm.
<style>
.header-block {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
min-height: 200px;
display: block;
}
</style>
<div class="container">
<div class="header-block" style="background-image=url({{image}})">
</div>
<nav>
....
</nav>
</div>