Width and Height not doing effect when trying to resize an image inside a div

Question

I'm trying to resize my image inside a form but width and height are not doing any effect.

.sectionForm {
        display: table;
        margin: 0 auto;
        background: url("https://image.flaticon.com/icons/svg/1914/1914882.svg") no-repeat center center;
        width: 100px;
        height: 100px;
    }

 .sectionForm { display: table; margin: 0 auto; background: url("https://image.flaticon.com/icons/svg/1914/1914882.svg") no-repeat center center; width: 100px; height: 100px; } .sectionForm form { width: 400px; box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2); border-radius: 40px; } .form-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 66px 0 50px 0; } footer { height: 1500px; } .footer-content { display: flex; flex-direction: column; display: table; margin: 0 auto; } .form-container input { border: none; border-bottom: 1px solid #828282; padding: 26px 0; margin-bottom: 100px; font-size: 20px; color: #4F4F4F; }

 <div class="sectionForm"> <form> <div class="form-container"> <input type="text" id="fname" name="fname" value="Nome"> <input type="text" id="lname" name="lname" value="E-mail"> <input type="text" id="lname" name="lname" value="Assunto"> </div> </form> </div>

Answer 1

What you need in this case is not width and height, but background-size .

Try using background-size: 100px 100px; one is for width and the other one is for height. You can also use percentages or background-size: cover and background-size: contain depending on your needs.

Answer 2

Try using {

background-size: 100% auto;

}