Clever Geek Handbook

Onsen-ui background images, for example at http://onsen.io/

I realized that it will be somewhere on the site, since all 3 example images look like this:

enter image description here

Maybe this is done with a telephone connection? Do not worry.

I tried setting up ons-navigator and various elements to transparent, background colors, etc.

Does anyone know how to set the background as their examples?

  • I should note that I am using a carousel and a list, this is not just a regular page but a menu, a list, carousel items, etc. display background colors.
+3


source to share


5 answers


The framework uses its own CSS rules logic to make certain things work.

I only recently started working with the framework so I don't have all the answers or if this is the correct way to get a full screen background image, but it worked for my project :)

JcDenton86 got me started in the right direction, thanks.

<ons-page modifier="full_bg">
    ...
</ons-page>

Correct way to add background rules to:



.page--full_bg__background {
    background: url('img/bg.jpg');
}

This only adds a background image to the page element, but the navigation bar is on top of the page element, so you need to add styles to make it transparent, then you can see the background in full screen.

.page-full_bg > .navigation-bar {
    background-color: transparent; 
}

enter image description here

+5


source


I was looking for a way to create a custom image as a background for my application using the Onsen UI. Finally, I managed to do this using an attribute modifier

on the element <ons-page>

. For example,

<ons-page modifier="appbcg">
   ....
</ons-page>

Then add CSS rules for the class:



.page--appbcg__background {}

The same goes for buttons, list box, etc.

+3


source


this trick worked like a charm for me. hope this helps.

<ons-page style="background: url('img/bgimage.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;">
//rest of your code . . 
</ons-page>
+2


source


A bit more tests went back to display but just seems hacky:

<ons-navigator var="myNavigator" ng-controller="MasterController" style="display:flex;background:url(http://192.168.1.12/news/images/card_lg/b5d7f649fd515a09b20f5d3c9b40a13b.jpg) no-repeat center; background-size: cover;">
    <ons-page style="background:none" >
        <ons-toolbar style="background:none">
0


source


I was looking for answers that were not in the documentation for these problems.

Here he is:

To modify the CSS styles set for onsenUI tags: eg. page, content, etc., you should look for them in the onsenUI.js file. They wrote these modifiers to give you a solution to change onsenUI components by urself.

example: ".page - * __ background" will be wrapped for you so that you choose your own name for * and overwrite the main style themes.

If you are reading the onsenui.js file, you will find all the possible modifiers and their names to write this special kind of syntax.

By understanding their rules, you can quickly get almost everything!

Bit late, but for future search ...

0


source






More articles:


All Articles