Como centralizar a imagem de fundo no CSS?

Perguntado por: srocha . Última atualização: 18 de maio de 2023
4.5 / 5 13 votos

Dito de outra forma: definir margens esquerda e direirta iguais par um bloco. Para obter esse efeito usamos o valor 'auto' para a proriedade margin. É necessário que o bloco tenha uma largura fixa, pois em se tratando de blocos flexíveis ele assumira a largura total disponível.

Para definir a posição de uma imagem utiliza-se como referência o canto superior esquerdo da imagem. A definição das coordenadas da imagem são relativas ao limite esquerdo e superior da página. Esta nova janela mostrará uma imagem colocada a 180 pixels da margem esquerda da página e a 50 pixels do topo.

Então, vamos te mostrar algumas formas de tentar corrigir problemas relacionados a isso.

  1. Verifique se o CSS está adicionado corretamente. Existem duas formas de utilizar CSS em um arquivo HTML. ...
  2. Cheque se a URL da imagem funciona. ...
  3. Adicione um tamanho explícito no elemento. ...
  4. Utilize a sintaxe correta do background-image.

Um texto para ser centralizado, basta usar a linha “text-align: center;” dentro do seu CSS. Assim como o próprio nome já diz “text-align” alinhamento de texto ele é usado para centralizar elementos textuais. Use dentro dos <p> parágrafos que você tiver e pronto!

Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus “bugs” para as CSS.

Centralizar em CSS: elementos de texto
Esse é o caso mais simples, basta você usar a propriedade text-align: center . Apesar da propriedade começar com a palavra text, os elementos inline, como span ou strong , não sofrem nenhuma alteração.

Centralizando DIV's horizontalmente com CSS
Este método consiste em informar o valor 'auto' para as propriedades de margin-left e margin-right que vai calcular automaticamente a diferença de espaço restante entre a largura do elemento externo e interno, centralizando o o elemento horizontalmente.

A propriedade CSS background-position define a posição inicial, relativa a posição de fundo na camada definido por background-origin , para cada background image definido.

A magia acontece com a propriedade background-size : background-size: cover; cover informa ao navegador que ele deve se certificar de que a imagem cobrirá sempre o contêiner inteiro (nesse caso, todo o html ).

CSS Position Absolute:
O position Absolute é um grande quebra galho no CSS. Com ele você pode posicionar qualquer elemento de acordo com o elemento pai que tenha um position diferente de static.

Suponhamos que você queira colocar uma ou mais imagens em uma página da web. Uma maneira de fazer isso é utilizando a propriedade do CSS background-image . Essa propriedade aplica uma ou mais imagens de fundo a um elemento, como a <div> , conforme explicado na documentação (link em inglês).

Se quiser alinhar sua imagem na esquerda, use a palavra left. Caso queira que a imagem se alinhe na direita, use right. Para alinhar no meio, o local é middle. Já para alinhar em cima, no topo, utilize a palavra top.

A propriedade background-size do CSS define o tamanho da imagem de fundo do elemento. A imagem pode ser deixada no seu tamanho natural, estendida ou comprimida para caber no espaço disponível.

Você pode colocar a imagem no topo adicionando top: 0; ou colocando a tag <img> antes das outras no <header id="cabecalho"> . Não entendi muito bem o que você quis dizer nesse comentário, pois na minha resposta a logo também é centralizada com o top: 0 .

Utiliza-se o padding-top e o padding-bottom de tamanho iguais. Caso o preenchimento não seja uma opção por algum motivo, há um truque onde fazemos com que a altura da linha fique igual à altura do texto. Para isto utiliza-se o height e o line-heigth de tamanhos iguais, e aplique o vertical-align com valor middle.

A propriedade vertical-align pode ser usada em dois contextos: Para alinhar verticalmente a caixa de um elemento inline dentro da caixa de linha que a contém. Por exemplo, pode ser usado para posicionar verticalmente uma imagem em uma linha de texto. Para alinhar verticalmente o conteúdo de uma célula em uma tabela.