how to add sidebar background image in now-ui-dashboard-pro

[pythonvelosiped]

how to add sidebar background image in now-ui-dashboard-pro?

[dragosct]

Hi, @pythonvelosiped! Thank you for using our product. To add an image on sidebar please follow this steps:

1. Create a new div inside the .sidebar div and on that div please add the following props:

    background-image: url(your image);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    position: absolute;
    background-size: cover;
    background-position: center center;

2. After that to see the image please add an opacity on the color of the sidebar which is on the pseudo element of the sidebar div :after like this:

.sidebar[data-color="orange"]:after, .off-canvas-sidebar[data-color="orange"]:after {
    background: #f96332;
    opacity: .4;
}

Regards,
Dragos

[AlexisDiazG]

how can I change background colors??

[dragosct]

Hi, @AlexisDiazG! Thank you for using our products. You have an example in the message above.

Regards,
Dragos