Category / Section
How to set background image for Sidebar?
2 mins read
This article explains how to add a background image for the EJ2 Sidebar control.
Solution
We can set the background image for the Sidebar control using CSS styles. Please refer to the code block below.
/* sidebar styles*/
#default-sidebar {
background-color: #224562;
color: #224562;
background- image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border:none;
}
Refer to the screenshot below of the output of the Sidebar with a background image.
|
Refer to the working sample for additional details and implementation: Sample
Documentation: https://ej2.syncfusion.com/documentation/sidebar/getting-started/
CSS structure: https://ej2.syncfusion.com/documentation/sidebar/style/
API reference: https://ej2.syncfusion.com/documentation/api/sidebar/
Live demo: https://ej2.syncfusion.com/demos/#/material/sidebar/default.html
