0

Buenas tardes. Estoy usando el framework Zurb Foundation y necesito que un grid-block tenga como fondo una imagen. Estoy usando la propiedad Background-image pero al ser el div mas pequeño que la imagen, esta no se ve de tamaño completo.

Como necesito que se vea:

introducir la descripción de la imagen aquí

Como se ve: introducir la descripción de la imagen aquí

Mi html:

<div class="grid-block" style="background-image: url('/assets/img/fondo-cabecera.jpg'); width: 100; height: 100; ">

2
  • 1
    Te faltan las unidades en el ancho y alto.
    – Alvaro Montoro
    Commented el 13 abr. 2017 a las 2:34
  • Sería mejor que evitaras usar estlos en línea como estás haciendo. Mejor usa una hoja de estilos aparte,o bien, crea la etiqueta style en el head de tu HTML. Y, por favor @ZyMonogatari, marca alguna de las respuestas de abajo como válida si ayudó a resolver tu problema...
    – Alex
    Commented el 18 abr. 2017 a las 8:34

3 respuestas 3

1

Podría funcionar si a la propiedad heightle das un valor de 100vh, esto hará que tu contenedor ocupe el 100% de la altura de la ventana del navegador. Adicionalmente te recomiendo añadirle la propiedad min-height con un valor igual o mayor a la altura del contenido para que siempre se visualice correctamente.

1

Intenta darle al div que va a contener el background, un width 100%, y un height 100vh (viewport height).

<div class="grid-block" style="background-image: url('/assets/img/fondo-cabecera.jpg'); width: 100%; height: 100vh; ">
1

Buenas: Puedes probar de la siguiente manera

.claseDelDiv{background-image: url("/la/url/de/la/imagen.png");background-repeat: no-repeat;background-size: cover;}

Tambien podrias probar el background-size: 100%, solo que si tu imagen es muy pequeña para el contenedor, la misma se estirara y se deformara mucho. Lo bueno del "cover" es que se adapta bien en el responsive. Espero te ayude.

Saludos.

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.