How to make background image fit to full width div in materialize CSS

Question

trying to make background image to cover whole div in materialize CSS, but after many changes, can't understand why is not doing it.

If i add a solid background, works great, but adding url image and fit size to cover, can't make it work.

My code works in css, not is inside a container or row..

.whatWeDo{
background:url("https://media-exp1.licdn.com/dms/image/C561BAQEe01Ads5I8Mg/company-background_10000/0/1579701573454?e=2159024400&v=beta&t=TSO-iYlwaBA5aoAI3KLAJejMasD77_sYSqP0wQviok0") no-repeat center center scroll;
    background-size:cover;
    height: 500px;
   }

<div class="whatWeDo ">
   
</div>

question from:https://stackoverflow.com/questions/65863790/how-to-make-background-image-fit-to-full-width-div-in-materialize-css

Answer 1

Your picture size is 1128 * 191px, And you gave your div a height of 500px, and use background-size: cover for it. When you do this. It zooms in on the image so that it eventually covers the entire div. So, we suggest you consider an image with the right size for this.