Backgroung image in <ons-page>

[giov]

Hi, how to set backgroung image in <ons-page> ?
Thank you.

[Fran Diox]

@giov ons-page has an inner element for that. The CSS selector is .page__background.

[giov]

I’m new with onsen UI. Can you post an example code?
I have many pages in my app with side menu, but i want to change the backgorund only in one page.
Thank you.

[patrick]

@giov you can set the id of the page you want to color:

<ons-page id='mypage'> ... </ons-page>

and then use the selector in css

#mypage .page__background { background-color: green}

Here is a codepen example: https://codepen.io/philolo1/pen/xOPYpV

[giov]

Thank you, but I tried with

#mypage .page__background {
  background-image: url('img/file.jpg');
}

and it doesn’t work.

[munsterlander]

@giov Was your path to the image correct? Did you get an error and did you inspect it?

[giov]

Yes, my path is correct, i don’t have any error. I don’t know how to inspect it. Did you try in your device? Can you post in codepen?
Thank you.

[Carson H]

I also have this problem. Setting the background colour works, but not image

[munsterlander]

@Carson-H When you view this in the browser, what does the code inspector say the error is?

[Тулга Баттогтох]

@giov did you tried
#mypage .page__background {
background-image: url(’…/img/file.jpg’);
}