Topic: Button with background image

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

button

Best, Konrad.


univlearning pro commented 4 years ago

Hi,

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.

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: 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