@R3ygoski
Posted
Olá novamente Isabela, parabéns pela conclusão do seu projeto que ficou muito parecido com o design proposto, parabéns.
Sobre sua duvida, existe uma forma, que não sei se ela seria o que você está buscando, mas você poderia colocar as imagens dentro de dois containers separados, exemplo <div>
, e então você definiria a posição dessas <div>
por meio de uma propriedade position:absolute
. Essa forma acredito eu que seja a mais fácil de fazer com que fique mais responsivo.
As duas imagens elas começam a crescer pro centro da tela, isso ocorre devido as medidas relativas que você utilizou, que foi %, você poderia utilizar pixel para a imagem de cima, e viewport para a parte debaixo, dessa forma elas não iriam mais crescer pro meio da tela. Ficaria assim por exemplo:
background-position: -625px 190%, 55vw -95%;
Mas bom, no fim das contas a melhor solução que eu achei pra esse desafio é realmente utilizando position, não sei se teriam outras formas que são mais eficazes.
Caso você encontre outra forma, que ache mais eficaz, por favor comente abaixo que eu gostaria de verdade de saber se existe alguma outra forma de posicionar melhor essas imagens abaixo, porque eu tive bastante dificuldade com essa parte, e de resto é isso. Caso tenha ficado alguma duvida quanto ao que eu disse, já sabe, só comentar abaixo.