Web design responsivo (RWD) , uma estratégia de design desenvolvida para lidar com a incrível popularidade dos dispositivos móveis para visualização na web. As imagens responsivas são um componente importante do Web design responsivo (RWD).
O design responsivo da Web é uma nova abordagem ao design de sites que garante aos usuários uma boa experiência de visualização, independentemente do tipo de dispositivo que estejam usando.
O web designer Ethan Marcotte é responsável por cunhar o termo "design responsivo". Em 2010, ele publicou um artigo em A List Apart discutindo o ambiente em rápida mudança de dispositivos, navegadores, tamanhos de tela e orientações. Construir locais separados para cada tipo de dispositivo simplesmente não seria sustentável. Em vez disso, ele propôs um conceito alternativo: design responsivo, que exige a construção de layouts flexíveis e fluidos que se adaptam a quase todas as telas.

Existem várias estruturas usadas por desenvolvedores para tornar uma página da Web responsiva.

  • Bootstrap
  • Fundação
  • Puro
  • Esqueleto
  • Symantic

Uma imagem de plano de fundo de página inteira responsiva se dimensiona de acordo com a janela de visualização do usuário. Existem vários sites que usam esse efeito, como-

Este efeito de imagem de fundo de página inteira pode ser facilmente adicionado a uma página da web usando CSS.
Exemplo de HTML de
entrada de implementação

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <title>Responsive Background Example</title>
</head>
<body>
    <h1>Hi GFG</h1>
</body>
</html>

CSS

body {
    /* Image Location */
    background-image: url("../img/Fall-Nature-Background-Pictures.jpg");
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    /* Font Colour */
    color:white;
}

EXPLICAÇÃO
tamanho do fundo: capa;
Esta propriedade informa ao navegador para dimensionar a imagem de fundo proporcionalmente para que sua largura e altura sejam iguais ou maiores que a largura / altura do elemento.
posição de fundo: centro central;
O exemplo acima define o eixo de escala no centro da janela de exibição.
anexo de fundo: fixo;
O plano de fundo é fixo em relação à janela de exibição
OUTPUT
A saída mostra a imagem de plano de fundo em diferentes janelas de exibição.