Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Imagem no meio de uma DIV

Publicado em: 2006-12-12 — 96.707 visualizacoes

Dois são os métodos de inserção de uma imagem dentro de uma DIV

  1. Incluir a imagem no código de marcação usando o elemento IMG;
  2. Declarar a imagem nas CSS;

A escolha de um outro método é uma decisão do desenvolvedor em função das particularidades de cada caso.

Vamos supor uma DIV com as dimensões de 400 x 200px e uma imagem com dimensões iguais a 310 x 150px.

Método da imagem no código

Quando você inclui uma imagem dentro de uma DIV usando a tag IMG a imagem será renderizada dentro da DIV “colada” no canto superior esquerdo. Então, use uma regra CSS para “puxar” a imagem para o centro da DIV declarando:

img {
	position:relative;
	left:50%;
	top:50%;
	}
	

A regra CSS acima mostrada posiciona o canto superior direito da imagem no centro da DIV. Contudo queremos que o centro da imagem coincida com o centro da DIV. Para obter este posicionamento precisamos “puxar” a imagem para a esquerda e para cima, de um valor igual a metade da largura e da altura da imagem, ou seja (155px para a esquerda e 75px para cima — metade de 310px e 150px respectivamente). Conseguimos isto declarando:

img {
	margin-left:-155px;
	margin-top:-75px;
	}
	

O esquema mostrado na figura abaixo esclarece o posicionamento

Esquema de posicionamento

Método da imagem nas CSS

Ao optar por este método basta declarar a posição center na declaração de background.
Quando se declara apenas uma das duas posições para uma imagem de background, a posição omitida e automaticamente assumida como center.

img div {
	background:#fff url(imagem.jpg) no-repeat center;
	}
	

Para maiores detalhes sobre este método consulte: A propriedade background.

Consulte uma página Web mostrando na prática os dois métodos. Abra o código fonte da página, para ver a aplicação das regras explicadas.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-12-12 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/12/12/imagem-no-meio-de-ume-div/trackback no seu site.

21 comentários na matéria: “Imagem no meio de uma DIV”

  1. ErickNo Gravatar disse:

    Pessoal, estou criando um sistema para impressão de rotulos usando o php e esbarrei com o seguinte problema:

    A imagem de fundo contém letras muito pequenas e na impressão a legibilidade não fica boa, tentei aumentar o dpi da imagem de fundo no photoshop, mas para ficar no tamanho exato para o background, precisei diminuir a imagem e o problema permanece.

    Acredito que se usar o método img pode dar certo, mas não sei como fazer as outras divs que contém os dados dinâmicos sobreescreverem a div da imagem.
    Alguém pode ajudar?

  2. guilhermeNo Gravatar disse:

    ola maujor, comprei o seu livro Criando sites com Html, porem tive um problema, na pag 270 mais precisamente, no #topo o meu css nao puxa a imagem, eu estava usando este aqui para puxar o arquivo css :

    porem ia tudo certinho mas a imagem nao aparecia, entao resolvi colocar no proprio documento html usando o e deu certo , vc sabe o motivo disso?grato

  3. ElvisNo Gravatar disse:

    Meu comentário de número 18 não imprimiu o PHP -.-‘

  4. ElvisNo Gravatar disse:

    @Diego ainda não da para ter essa total compatibilidade mas você pode fazer algo como

    background-image:url(.jpg);

  5. AparecidoNo Gravatar disse:

    Olá. Estou fazendo um arquivo de boas vindas e nele estou colocando uma imagem e com textos por cima. Acontece que nos emails com gmail e yahoo aparecem perfeitos e ja no outlook não aparece. as Div´s com os textos ficam abaixa da imagem.
    Como resolvo isso pra que o texto permaneça sempre em cima das imagens.

  6. adailtonNo Gravatar disse:

    como que faz para que quando o cara clica no botao x aparece na div uma imagem e quando clica no botao y aparece outra imagem?

  7. karpovlNo Gravatar disse:

    Pegue seu arquivo CSS e salve-o como PHP e ao invés de fazer a referência do CSS faça um include do PHP em sua página e poderás manipular toda a estrutura css dinamicamente dentro de seu script. Isso funcionará para qualquer linguagem de programação.

  8. FranciscoNo Gravatar disse:

    Olá

    Sou novo no CSS e gostaria que me ensinassem como construir uma Div. É que eu estou construindo um site e preciso de uma área com duas fotos uma do lado da outra e sobre elas peciso colocar texto. Estou inserindo tudo cm imagem mas não consigo colocar o texto sobre as imagens. Desculpe-me a “inocência” no assunto.
    Obrigado

  9. AvronnNo Gravatar disse:

    Olá
    Eu tenho uma folha de estilos onde coloco uma figura como se fosse marca d’agua, eu quero colocar junto agora mais uma figura, no topo das páginas que acessarão estes estilos, mas não consigo fazer isto, sou iniciante e estou apanhando.
    Obrigado

  10. ReneNo Gravatar disse:

    Pessoal, uma coisa que me persegue é o seguinte:

    tenho 10 imgens, farei um laço em php para exibi-las. porem algumas das imagens são mais altas do que largas, e outras vice-versa. Como fazer o metodo da imagem no código? Pergunto isso pois, terei de criar um link com esta imagem para por exemplo abrir a imagem grande. e agora? Vertical alingment, não encontrei um tutorial que me explicasse a lógica, e eplo visto para imagens tb, precisa saber o tamanho XxY da imagem.

  11. chicoNo Gravatar disse:

    Nossa isso me ajudou muito em um site q estou fazendo !!!

  12. DiegoNo Gravatar disse:

    Obrigado Alfredo Holffman!

    Jamais havia pensado dessa maneira! Gostei muito da idéia!

  13. júnioNo Gravatar disse:

    Muito obrigado, pela informação.De grande valia.-Saúde e paz para ti.

  14. MaujorNo Gravatar disse:

    @Trevisan,
    Sim! houve um engano ali.
    A coreção foi feita.
    Grato

  15. TrevisanNo Gravatar disse:

    Maujor,
    no exemplo do método da imagem nas css, não seria o background da div? ao inves da img?

    desculpa. se estiver enganado exclua este comentário.

    Abraço

    Roberto Trevisan

  16. AmandaNo Gravatar disse:

    Oi, sou leiga no assunto… sei um pouco de html, to levando um baile do css. Mas to aprendendo aos pouquinhos. Queria um help. To com dificuldade de achar solução pra um problema no meu blog. Coisa ridícula, mas que me incomoda. Dá uma olhada no meu blog, vai lá em cima (onde se maximiza, minimiza) e restaura… Dá uma olhada na imagem. Ela não é do mesmo tamanho que o background. Não sei como fazer pra que ela acompanhe o resto do blog. Me ajuda, porfavor. Talvez seja só um detalhe que eu não to sabendo arrumar.
    Desde já te agradeço.
    Abraço
    Amanda

  17. PauloNo Gravatar disse:

    Muito bom

  18. Alfredo HolffmanNo Gravatar disse:

    Diego, este dia pode estar longe, mas existem outras soluções para isso.
    Por exemplo como fiz recentemente, ao invés de chamar o arquivo “.CSS” passei a chamar o arquivo “.PHP” e passando um parâmetro pela URL consigo imprimir o CSS na tela.
    Funcionou muito bem e pude parar de inserir imagens na mão dentro do HTML.

  19. Leonardo L ProcópioNo Gravatar disse:

    Parabens!!!

  20. DiegoNo Gravatar disse:

    Iniciei a trabalhar com CSS há alguns meses.

    Utilizo imagens pelo HTML (img) quando construo páginas dinâmicas (PHP), devido não ser possível incluí-las via CSS.

    Sonho com o dia em que será possível incluir código PHP dentro do CSS.
    Seria o auge do CSS!!!

  21. Carlos EduardoNo Gravatar disse:

    Exatamente!

    Como foi dito, depende da necessidade do caso.
    Caso seja somente para estilização visual, o caso da imagem no CSS é o que vale mais a pena.

    Agora, se a parte fizer parte do conteúdo, utilizo-a diretamente no HTML.

    Parabéns pelo artigo.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo