CSS resize image mobile version

Viewed 102

I am a beginner in html/css. I am using a template for my website. Following image bennar.jpg, fits in browser but in mobile view the img is not resized to 100%. Could someone help me to fix it? Very appreciated

    .page-header-area {
  background: rgba(0, 0, 0, 0) url("images/bennar.jpg") center center no-repeat;
  max-width: 100%;
  text-align: left;
  padding: 100px 0;
}
3 Answers
.page-header-area {
  background: url("images/bennar.jpg") center center no-repeat;
  background-size: cover;
  width: 100%;
  text-align: left;
  padding: 100px 0;
}
.page-header-area {
  background: rgba(0, 0, 0, 0) url("images/bennar.jpg") center center no-repeat;
  min-width:300px;
  max-width: 100%;
  text-align: left;
  padding: 100px 0;
}

I solved it! fyi

background-size: 100% auto;

Related