duda en css

Avatar
<header class="cabecera"> </header>

muchachos este es mi esctructura html y lo que quiero hacer es poner una imagen de fondo pero desde css que quede resposive , lo intente mucha veces pero no fui capaz , este fue mi codigo

.header{ background-image: url(../img/banner.jpg); background-repeat: no-repeat; background-size: 100% 100%;

}

tambien he intentendo de muchas manerAS pero no he tenido exito , alguien que me colabore , gracias.

9respuestas
Avatar

¿Podrias poner un título que describa tu duda?

Avatar

creo que ya no se puede profe no me deja editar

Avatar

pero es agregar una imagen de fondo desde css que sea responsiva , lo intente con backgorund-image , pero como la estructura html no contiene no lo toma

Avatar

.cabecera, header es la etiqueta y cabecera la clase hermano. saludos

Avatar

.cabecera{ background-image: url(../img/banner.jpg); background-size:contain; background-repeat: no-repeat; height: 450px; width: 100%;
}

hice lo siquiente pero aun nada

Avatar

css

.cabecera{ background-image: url(../img/banner.jpg); background-size:contain; background-repeat: no-repeat; height: 450px; width: 100%;
}

Avatar

Hola David, El background-size pruebalo con cover.

css .cabecera{ width: 100%; height: 450px; background-image: url(../img/banner.jpg); background-repeat: no-repeat; background-size: cover; }

Avatar

Hola David... Antes que nada asegurate de agregar los elementos necesarios para ejecutar el "META-VIEWPORT"; así queda responsive... Intenta con este código:

.cabecera{ background-image: url(../img/banner.jpg) no-repeat; background-size: 100%; }

Avatar

Hola David, Si quieres realizar la imagen responsive debes asignar un tamaño al header tal como pusiste en tu codigo que fue 450px, y puedes usar la propiedad background-size: cover ,esta propiedad con este valor te permitira que la imagen se ajuste siempre al tamaño del disponible, por ende para mostrar una imagen completa posiblemente corte ciertas secciones de la imagen para que se observe sin deformaciones.

Si utilizas la propiedad background-size: contain, esta ropiedad permite a la imagen estar "contenida en un espacio siempre se mostrara completa sin ningun tipo de corte, pero para lograr esto dejara ciertos espacios en el contenedor.

Creo que lo que intentas hacer se ajusta mas con el cover y por lo tanto el codigo CSS quedaria asi: .cabecera{ background-image: url(../img/banner.jpg); background-size:cover; background-repeat: no-repeat; height: 450px; width: 100%;

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
SVG Desde Cero

SVG Desde Cero