user2502658 user2502658 - 1 month ago 11
CSS Question

Full Screen Image header - Responsive Setting

I have a full screen featured image header on my home page, which I am trying to make responsive. The width of the image seems to cut off on different screen sizes

I have tried this height and width setting, but would like the image itself to "resize" responsively.

.hero-small {
height: 886px!important;
width: auto;
}


Website Link

Answer

here is something you can look up that will help

  1. width: 100%;
  2. background-size:cover
  3. background-size:contain
  4. or use media queries such as screen and (max-width: 500px) {} to adjust each break point with specific background-size/position

hope this help