0

Tengo este body:

<body data-open="click" data-menu="vertical-menu" data-col="2-columns" class="vertical-layout vertical-menu 2-columns fixed-navbar">

En el layout padre, y me gustaria meterle una imagen de fondo, pero he intentado cambiar el css, que buscando la clase se supone que es esta linea:

body.vertical-layout.vertical-menu.menu-expanded .main-menu-footer .content {
  margin-left : 0;
  background-image: url('../images/fondo.jpg');
}

Y no me muestra ninguna imagen, que problema podria haber?

Muchas gracias de antemano.

1
  • 1
    Puedes interntar con esto: body.vertical-layout { margin-left : 0; background-image: url('wallpapers.wallhaven.cc/wallpapers/full/…); } Commented el 5 sept. 2018 a las 15:16

3 respuestas 3

2

Creo que es porque la clase en el css, es más larga que la que tienes en el html, las otras (supongo) las estás llamando dinámicamente, pero no son necesarias y en el css, te recomiendo que si son clases de un mismo elemento, no van separadas por un espacio, sino simplemente por un punto.

Mira este ejemplo a continuación, lo único que hice fue quitar las clases que no estaban en el html, los espacios y añadirle una altura mínima al body para poder ver bien la imagen de fondo:

body.vertical-layout.vertical-menu{
  margin-left : 0;
  background-image: url('http://picsum.photos/1200/600');
  min-height: 100vh;
}
<body 
  data-open="click" 
  data-menu="vertical-menu" 
  data-col="2-columns" 
  class="vertical-layout vertical-menu 2-columns fixed-navbar"
>

1

creo que falta mas información, el body tiene una altura y ancho? si no posee medidas muy probablemente la imagen no se vea porque su contenedor no tiene ni alto ni ancho, seteale un width y un height de prueba, si no te funciona ve en la consola del navegador a ver si es que la imagen te esta dando un 404, quizas puede ser por rutas y no lo esta viendo, es decir esta tratando de buscarla pero no la encuentra en la ruta que indicas en el css, la otra puede ser que la imagen es mas grande que su contenedor y estas viendo un espacio en blanco o transparente de la imagen, trata de darle tamaños a la imagen es decir un background-size. Nos cuentas si te sirvió.

2
  • Muchas gracias por tu aportación, ahora publico respuesta.
    – Peisou
    Commented el 5 sept. 2018 a las 16:09
  • Que bueno que te pudimos ayudar, saludos. Commented el 5 sept. 2018 a las 17:22
0

Gracias a los comentarios de David y Edgar he conseguido realizarlo, primero no me cojia el estilo porque bootstrap me monta al de app.css por defecto de la aplicación, y efectivamente no tenia definido ningun ancho ni alto, he añadido esto en app.css y en bootstrap.css y automaticamente ya me ha cojido la imagen correctamente.

html body {
  height : 100%;
  background-color : #F3F3F3;
  direction : ltr;
  background-image: url("../images/backgrounds/fondo.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom right;
  overflow-x: hidden !important;

}

Muchas gracias, no se que haria sin esta comunidad!

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.