duda en css

DC
David cardenas

@davidcardenas

<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.

Avatar
Alvaro Felipe

@alvarofelipe

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

DC
David cardenas

@davidcardenas

creo que ya no se puede profe no me deja editar

DC
David cardenas

@davidcardenas

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

LV
Leonardo Villar

@leonardovillar3174

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

DC
David cardenas

@davidcardenas

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

hice lo siquiente pero aun nada

DC
David cardenas

@davidcardenas

css

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

Avatar
Angel Salvador

@angelsalvador

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; }

LM
Luis Erick Muñoz Ibarra

@luiserickmunozibarra

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
Josue Sanchez

@josuesanchez67370

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%;

Avatar

Escribe una respuesta