Necesito que la imagen de fondo ocupe el 100% del ancho, tanto el Portrait como en Landscape, pero no se si el problema de fondo es el ancho de la propia imagen mas que de mi CSS.
Ya intenté con Background-size: cover, pero no queda acorde al diseño
Deberia quedar asi
Y asi es como tengo yo
Este es mi codigo HTML
<header id="header">
<div class="contenedor">
<a href="#" id="logo">
<h1>Insure</h1>
</a>
<a href="#" id="btn-navegacion">
<img src="imagenes/icon-hamburger.svg" alt="Icono hamburgersa de navegacion" />
</a>
<nav>
<ul>
<li><a href="#" class="karla">How we work</a></li>
<li><a href="#" class="karla">Blog</a></li>
<li><a href="#" class="karla">Account</a></li>
<li><a href="#" class="karla btn-plan">View Plans</a></li>
</ul>
</nav>
</div>
</header>
Este es mi Css
#header nav {
position: fixed;
top: 60px;
left: 0;
display: block;
width: 100%;
height: 100%;
background: #2B282F;
background-image: url("../imagenes/bg-pattern-mobile-nav.svg");
background-position: bottom;
background-repeat: no-repeat;
background-size: container;
}
Intente crear un div, debajo de la UL para probar dandole position absolute, pero no lo logre, existe alguna manera de lograrlo?
background-size: contain;
nocontainer
.