Imagem no meio de uma DIV
Publicado em: 2006-12-12 — 132.956 visualizacoes
Dois são os métodos de inserção de uma imagem dentro de uma DIV
- Incluir a imagem no código de marcação usando o elemento IMG;
- 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
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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
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?
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
Meu comentário de número 18 não imprimiu o PHP -.-‘
@Diego ainda não da para ter essa total compatibilidade mas você pode fazer algo como
background-image:url(.jpg);
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.
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?
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.
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
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
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.
Nossa isso me ajudou muito em um site q estou fazendo !!!
Obrigado Alfredo Holffman!
Jamais havia pensado dessa maneira! Gostei muito da idéia!
Muito obrigado, pela informação.De grande valia.-Saúde e paz para ti.
@Trevisan,
Sim! houve um engano ali.
A coreção foi feita.
Grato
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
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
Muito bom
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.
Parabens!!!
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!!!
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.