Topic: Button with background image

univlearning pro asked 4 years ago


How can I put an image as background of button?, I'm trying to do this, but the image does not fill the button completely.


Konrad Stępień staff answered 4 years ago

Hi @univlearning,

Probably do you need more info about backround-size property.

Please follow my code below.

app HTML

<button type="button" class="btn-image white-text" mdbBtn mdbWavesEffect>Primary</button>

styles.scss (global styles)

.btn-image {
    background-image: url('') !important;
    background-size: contain; //or cover


Best, Konrad.

univlearning pro commented 4 years ago


That is exactly what I needed, great!

Thanks a lot.

mark-steven-au premium commented 4 years ago

Thanks helped me too as could not find how to achieve this!However did not appear to work with MTBBtnCan it be used in this way as it seems to ignore the rounded etc, but did place the image?Primary

Konrad Stępień staff commented 4 years ago

Hi @mark-steven-au, Could you explain to me if I can help you with something?

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No