Я почти закончил свой фон, но он не работает должным образом, я пытаюсь настроить изображение так, чтобы оно соответствовало размерам окна просмотра. Мне нужно, чтобы мое изображение реагировало и действовало как background-size: cover. Мне также нужно убрать полосы прокрутки, и я не знаю, почему это там. Может ли кто-нибудь помочь мне сделать так, чтобы мое изображение соответствовало всей области окна просмотра и было отзывчивым - мне нужно, чтобы оно было 100% ширины и 100% высоты, а изображение было покрыто
codepen
<svg viewBox="0 0 490 500" width="100%" height="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%">
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image id="svg-bg" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>