Imagem de fundo html-css não exibindo
CSS oferece muitas propriedades de estilo para elementos HTML. Mais especificamente, adicionar imagens de fundo usando CSS é uma das tarefas de design importantes. No entanto, trabalhar com imagens de fundo pode ser um desafio às vezes. Isso ocorre porque vários outros fatores podem impedir que a imagem de fundo exiba.
Este post cobrirá o seguinte:
- Como definir o URL da imagem corretamente?
- Como definir o tamanho do elemento pai da imagem?
- Como vincular o arquivo css corretamente?
- Como definir CSS “fundo”Propriedades?
Como definir o URL da imagem corretamente?
A imagem de fundo não carrega no navegador se o URL da imagem estiver incorreto. Analise o exemplo discutido abaixo para conhecer o problema com a solução relevante.
Exemplo
Em html, adicione um “”Elemento e atribui a classe“banner-img”:
Estilo de estilo “banner-img”
.Banner-IMG
Largura: 400px;
Altura: 300px;
Imagem de fundo: URL (/IMG/Light-BULBS-5488573_1920.jpg);
Size de fundo: capa;
De acordo com o snippet de código fornecido:
- ““largura”Determina a amplitude do elemento.
- ““altura”Ajusta a altura do elemento.
- ““imagem de fundo”Especifica o URL da imagem.
- ““tamanho de fundo"Com o valor"cobrir”Se encaixa na imagem em todo o contêiner.
Saída
Se você adicionar o URL da imagem errada, conforme mencionado no bloco de código abaixo, o erro 404 ocorrerá:
.Banner-IMG
Largura: 400px;
Altura: 300px;
Imagem de fundo: URL (/IMG/BULBS-5488573_1920.jpg);
Size de fundo: capa;
Clique com o botão direito do mouse na página da web e selecione o “inspecionar”Opção, a janela da ferramenta do desenvolvedor mostrará o status do recurso:
Como definir o tamanho do elemento pai da imagem?
Às vezes, a imagem falha ao carregar na página da web se o tamanho do elemento pai não estiver definido.
Analise o exemplo abaixo.
Exemplo
Adicione um “”Elemento e atribui a classe“bandeira”:
.contente
Imagem de fundo: URL (/IMG/Light-BULBS-5488573_1920.jpg);
Size de fundo: capa;
Largura: 400px;
Altura: 500px;
Aqui:
- ““imagem de fundo”Define o URL da imagem de fundo.
- ““tamanho de fundo”Define o tamanho da imagem. Mais especificamente, o “cobrir”O valor cobre o contêiner inteiro.
Saída
Como vincular um arquivo CSS corretamente?
Se você usar a folha de estilo externo, verifique se o ““”O elemento deve ser especificado corretamente. O nome do arquivo deve ser especificado corretamente no “Href”Atributo:
Como definir propriedades "de fundo" CSS?
O CSS “fundoAs propriedades devem ser especificadas adequadamente para os elementos:
.Banner-IMG
margem: automático;
Largura: 400px;
Altura: 250px;
Imagem de fundo: URL (/IMG/Light-BULBS-5488573_1920.jpg);
Size de fundo: capa;
Posição de fundo: centro;
Repetição de fundo: sem repetição;
Aqui:
- ““imagem de fundo”Especifica o URL da imagem de fundo.
- ““tamanho de fundo”Define o tamanho da imagem de fundo.
- ““posição de fundo”Ajusta a posição da imagem de fundo.
- ““fundo de repetição”Determina se a imagem é ou não repetida.
O CSS “fundo”A propriedade pode ser especificada como uma propriedade abreviada como esta:
Antecedentes: URL (/IMG/Light-Bulbs-5488573_1920.jpg) Center/capa sem repetição;
Observação: A posição de fundo e o tamanho de fundo deve ser separada pelo “/”Slash, conforme mencionado no bloco de código acima. Caso contrário, ele não exibirá a imagem.
Para verificar, inspecione a página e observe a janela da ferramenta de desenvolvedor, você verá o seguinte:
Estas são as razões e correções para a imagem de fundo do CSS que não está exibindo o problema.
Conclusão
Para carregar a imagem de fundo corretamente, muitos fatores devem ser considerados. Isso inclui definir o URL da imagem corretamente, ajustar a largura e a altura do elemento pai, incluindo corretamente o link da folha de estilo externo e especificar o CSS “fundo”Propriedades corretamente. Este post explicou as correções para as imagens de fundo que não exibem problema.