Layout Boxed

Optional subtitle goes here

You can simply create a boxed layout by adding boxed class to your body page.
In boxed layout, you will see the background of the page.
For that reason, we decided to add advanced functionnalities to allow you to customize this background the easiest way as possible.

Image Backround

To add / change image of your background, you just have to change data-bg-img attribute of your body. Here is a concrete example:

<body data-bg-img="bg/pattern/1.png">

Here, image will not be repeated and will fit screen size.

Pattern Background

Pattern background is the same thing since it's an image too. But image will be repeated various times. For pattern background, just add bg-pattern class to your body. Here is a concrete example:

<body class="bg-pattern" data-bg-img="bg/pattern/1.png">

Want to try it live?

Here you can change background image as well as bacground color. Note that background is only visible for images with transparency (pattern in general).

Choose pattern image:
Or choose background image:
Choose a color:
Live code
<body class="bg-pattern" data-bg-img="bg/pattern/1.png" data-bg-color="#98CED6">



Boxed Background

Theme Colors

Dark Theme