1

Tengo un problema, estoy intentando insertar una imagen de fondo mediante la propiedad background-image, lo hice de la siguiente manera:

<div class="container-fluid bg-img"></div>

y CSS

.bg-img {
    width: 100%;
    height: 100%;
     background-image: url("../img/primary.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-color: gray;
}

Pero nada aparece, cuando coloco alguna palabra dentro del div que contiene la clase pues aparece una linea de fondo, como si no estuviera tomando el width y el height. ¿Qué puedo hacer? Muchas gracias!

1
  • Y si estableces una altura de 500px te aparece la imagen?
    – zerokira
    Commented el 29 ago. 2017 a las 19:31

5 respuestas 5

2

Al div tienes que asignarle height y width

.bg-img {
  background-image: url("img/03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

div {
  height: 400px;
  width: 400px;
}
<div class="container-fluid bg-img"></div>

0

Espero que te sirva, ahora si lo que estas buscando es tener un color de fondo y una imagen a la vez lo estas asiendo mal; pero si necesitas mas ayuda me avisas y te puedo ayudar.

.padre {
  height: 150px;
  width: 100%;
}

.bg-img {
  width: 100%;
  height: 100%;
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

.bg-img2 {
  width: 100%;
  height: 150px;
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}
<strong> Dos divs </strong>
<div class="padre">
  <div class="bg-img"></div>
<div>

<strong> En un solo div </strong>

<div class="bg-img2"></div>

0

El problema que tienes es porque le asignas una imagen de fondo a un contenedor sin una altura determinada (recuerda que la medida height: 100%; te coge la altura total del padre). Con cambiarle height por una medida en píxeles ya te debería correr sin problemas.

.bg-img {
  width: 100%;
  height: 400px ; /* Antes 100%; */
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

PD: Recordarte también que background prioriza la imagen antes que el color, con lo cual el fondo gris solamente te debería salir si tienes mal la URL de la imagen.

0

En caso de tener el padre con un alto fijo funcionaria, en este caso le falta un alto fijo para que muestre el fondo. :)

    .bg-img {
        width: 100%;
        height: 200px;
        background-image: url("../img/primary.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: gray;
     }

https://jsfiddle.net/adivirgilio/823uenuy/

0

Con esto lo solucione yo y es bastamte sencillo y explica

body {
    /* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */
    background-size: cover;
    /* Para dejar la imagen de fondo centrada, vertical y horizontalmente */
    background-position: center center;
    /* Para que la imagen de fondo no se repita */
    background-repeat: no-repeat;
    /* La imagen se fija en la ventana de visualizacion para que la altura de la imagen no supere a la del contenido */
    background-attachment: fixed;
    /* Ubicacion de la imagen */
    background-image: url("../img/primary.jpg");
}
* {
    margin: 0px;
    box-sizing: border-box;
    /*text-align: center;*/
}

Tu Respuesta

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