CODEWITHSUNDEEP
htmlcss
jarwin
jarwin

Reputation: 668

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

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>

Upvotes: 0

Views: 108

Answers (2)

Fr&#225;dely Dilon&#233;
Fr&#225;dely Dilon&#233;

Reputation: 321

Try using {

background-size: 100% auto;

}

Upvotes: 0

Mihail Minkov
Mihail Minkov

Reputation: 2633

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.

Upvotes: 2

Related Questions