0

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

introducir la descripción de la imagen aquí

Y asi es como tengo yo

En ambas vistas, se logra ver asi

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?

2
  • Si no me equivoco es background-size: contain; no container.
    – Jaime
    Commented el 21 feb. 2022 a las 4:20
  • El problema que visualizó es que posiblemente la clase "contenedor" puede estar agregando algún padding o margin. Primero se define el background y luego se agrega el contenedor para centrar el contenido. Commented el 21 feb. 2022 a las 4:42

1 respuesta 1

0

Mi recomendación sería que la imagen que desees agregar la pongas como un li adicional. Y que este item adicional le puedas agregar todos los estilos que requieras.

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>
                <li><img src="https://www.svgrepo.com/show/43871/menu.svg"/></li>
            </ul>
        </nav>
    </div>
</header>

CSS

*{
  margin: 0;
  padding: 0;
}

#header{
  width: 100%;
}

nav li img {
  position: absolute;
  width: 100%;
}

De esta manera la imagen podrá tomar todo el tamaño de la pantalla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.