Dois são os métodos de inserção de uma imagem dentro de uma DIV
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.
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
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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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.