How can I set a background image for all pages?

Hello,

I made an App with framework7 versión 1 and used this code to add a background image:

function ponerfondo() {
    // ------ Seleccionamos el fondo de la App.
    $$('.page').css('background', 'url("./img/fondo.jpg") no-repeat center center fixed');
    $$('.page').css('background-size', 'cover'); // ------ Esto es para que se ajuste al tamaño de la pantalla.
}

And I had to call this function everytime a page was loaded.

Now I am trying to begin a project with framework7 v.2 and it doesn’t work. May be due to changes in the version 2.

But, could you help me finding a way to set a backgroung image for all pages without having to call the function everytime a page is loaded?

Thanks.

What is wrong with CSS files? Why not putting these rules in your app’s css file?

I tried to do this in my css file and didn’t work:

@font-face {
  font-family: "centabel";
  src: url("centabel.ttf") format("opentype"); 
}

.page {
  font-family: "centabel";
  background: url("../img/fondo.jpg") no-repeat center center fixed;
  background-size: cover;
}

It loads ok the font but don’t set the background image.

Then just add !important:

.page {
  font-family: "centabel";
  background: url("../img/fondo.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

Perfect!

Today I have learnt a new thing: !important
To priorize something over the rest.

Thanks.

I tried the above example in my project and I am getting:

localhost/:1 GET http://localhost:8080/src/assets/images/cover.png 404 (Not Found)

The script

.page {

font-family: “centabel”;

background: url("/src/assets/images/cover.png") no-repeat center center fixed !important;

background-size: cover !important;


}

What am I not doing correctly?

path to image should be relative, not absolute like in your example