I'm having an issue with my website background image responsiveness. It works fine during medium screen size, but when it switches to small and extra-small sizes, the image gets cut off. This means that when I try to view the page on an extra-small screen, I can only see a portion of the image. How can I fix this so that the entire background photo is visible on smaller screens?
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?familyans+SC:wght@300&display=swap" rel="stylesheet">
<div th:replace="fragments/front_head"></div>
</head>
<body>
<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>
<nav th:replace="${@service.getLoggedCustomer()} ? 'fragments/cattery_logged_in_navbar' : 'fragments/cattery_navbar'"></nav>
<footer th:replace="fragments/cattery_footer"></footer>
</body>
</html>
CSS:
body {
padding-top: 120px;}