Uma das partes da solução é trabalhar com media query , ...e para cada resolução de tela ter a imagem tratada e adequada a resolução. Umas das ferramentas para redimensionar a imagem pode ser o photoshop.

Exemplo da media query:

@media screen and (min-width: 768px) {
  .titulo {
    font-size: 24px;
  }
}

/* Estilos para telas menores que 768px de largura */
@media screen and (max-width: 767px) {
  .titulo {
    font-size: 18px;
  }
}

Você pode adaptar a imagem desde a tela de um celular até um super monitor com uma resolução enorme. Vale pesquiser sobre o conceito " mobile first " que você começa desenvolvendo a tela para smartphones e vai evoluindo para telas de tablet's , desktops , monitores enormes como tv's.( aqui se encaixa a media query , que permite vc ter o site todo adapatado para cada tipo de aparelho).

Se tiver alguma dúvida , vc pode recorrer ao chat gpt , caso estiver com muita pressa.

Vc pode testar essas diferenças aplicadas , no console do seu navegador " Devtools" no Edge f12, através da emulação de dispositivos,( geralmente ícone do lado esquerdo superior da tela

CharlesMayerano passado

Ok, pelo que entendi a media query serve como uma regra pra que determinado estilo seja aplicado conforme o tamanho da tela do dispositivo, certo? mas como posso usar isso para dimensionar para telas maiores? Quando uso meu monitor normal a imagem fica certinha e pra tamanhos menores tbm, mas quando olho no monitor ultrawide eu perco um bom pedaço da imagem, pois o width fica muito grande.

Fernandooano passado
> mas como posso usar isso para dimensionar para telas maiores? Cada `media query` com determinada resolução você pode ter `uma versão da mesma imagem` para que ela se encaixe perfeitamente sem sofrer distorções, você vai inserir uma **versão da imagem redimensionada adequadamente em editor de imagens** ( ex. photoshop), para cada media query assim como a configuração do estilo **"ex. width"** fazendo com que cada resolução específica tenha a imagem adequada e o estilo adequado... *resumindo: é uma versão do site pra cada tipo de resolução ...* -um media query pra mobile -um para desktop padrão -e um para monitores e telas maiores Se vc estiver com muita pressa da pra vc inserir todo seu css no chatgpt e solicitar media query para as resoluções que vc quiser, **provavelmente ele te retornará com as versões solicitadas já configuradas e vc aprende só de bater o olho.**
hmassareliano passado

Você pode ajustar isso por meio do background-size, mas não entendi qual foi seu problema, a imagem se corta?