Button with background image


Topic: Button with background image

univlearning pro asked 11 months ago

Hi,

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.

Thanks.


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
}

button

Best, Konrad.


univlearning pro commented 11 months ago

Hi,

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.
Status

Resolved

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
Tags
Related topics