I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits properly on all screen sizes? I have tried using CSS within the Bootstrap framework and style tags, including overflow, but it hasn't worked so far.
Below is the code snippet:
<div class="text-white" style="
background-image: url('/static/ghc_building_darkened.jpg');
background-position: 50%;
background-repeat: no-repeat;
height: 100vh;
overflow: auto;
width: auto;
background-size: 100%;
">
code omitted here.
</div>