Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Sidenav custom background image

galileo priority asked 4 years ago


Expected behavior I should be able to change the background of sidenav to my custom file.

Actual behavior Background image sidenav1 is hardcoded somewhere I can't find. Every time my page is rendered, the file is downloaded from mdbootstrap page...

Resources (screenshots, code snippets etc.)


Konrad Stępień staff answered 4 years ago


Hi @galileo,

If you have example with sn-bg-* class, please remove that.

For example

<mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">

These classes have background.

.sn-bg-1 {background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg);}
.sn-bg-2 {background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);}
.sn-bg-3 {background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg);}
.sn-bg-4 {background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);}

Best, Konrad.


galileo priority commented 4 years ago

Thanks - done, works. I thought those classes do something more than just set the background...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No