Button with background image

Topic: Button with background image

univlearning pro asked 11 months 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 11 months 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('https://brandflow.net/assets/img/featured/mdb-prolog.jpg') !important;
    background-size: contain; //or cover


Best, Konrad.

univlearning pro commented 11 months ago


That is exactly what I needed, great!

Thanks a lot.

mark-steven-au pro premium commented 9 months 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 9 months ago

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

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.10.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Related topics