Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Backgroung image in <ons-page>
-
Hi, how to set backgroung image in <ons-page> ?
Thank you.
-
@giov
ons-page
has an inner element for that. The CSS selector is.page__background
.
-
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.
-
@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
-
Thank you, but I tried with
#mypage .page__background { background-image: url('img/file.jpg'); }
and it doesn’t work.
-
@giov Was your path to the image correct? Did you get an error and did you inspect it?
-
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.
-
I also have this problem. Setting the background colour works, but not image
-
@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’);
}