Is there a way to crop the middle part of an image and turn it into a landscape cover background using HTML and CSS? The goal is to achieve a responsive background like the one shown below:
The background should be 100% width and about 400-500px in height when viewed at full screen. Additionally, any tips on creating a search box would be appreciated. Thank you.