Background image is not displayed in the

Question

Background image is not displayed in the

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have this body:

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

In the parent layout, and I would like to put a background image, but I tried to change the css, looking for the class is supposed to be this line:

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

And he does not show me any image, what problem could there be?

Thank you very much in advance.

html css laravel

asked by Peisou 05.09.2018 в 16:59

source

3 answers

Delete a record showing confirmation SyntaxError: JSON.parse in $ (document) .ready ();

score 2 · Answer 1

I think it's because the class in the css, is longer than the one you have in the html , the others (I guess) are calling dynamically, but they are not necessary and in the css, I recommend that if they are classes of the same element, they are not separated by a space, but simply by a point.

Look at this example below, the only thing I did was remove the classes that were not in the html, the spaces and add a minimum height to the body to be able to see the background image well:

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

score 1 · Answer 2

I think more information is missing, the body has a height and width? If you do not have measurements, the image will probably not be visible because your container has neither height nor width, set it to width and a height test, if it does not work, see the console of the browser to see if the image is giving you a 404, maybe it can be by routes and you are not seeing it, that is, you are trying to look for it but you can not find it in the path indicated in the css, the other one can be that the image is larger than your container and you are seeing a blank or transparent space of the image, try to give sizes to the image ie a background-size . Tell us if he served you.

score 0 · Answer 3

Thanks to the comments of David and Edgar I managed to do it, first I did not like the style because bootstrap mounted me to app.css by default of the application, and effectively had no width or height defined, I added this in app.css and in bootstrap.css and I have already got the image correctly.

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;

}

Thank you very much, I do not know what I would do without this community!

Greetings.