Solucionado
Olá Pessoal, tudo bem? Preciso de uma grande ajuda de você para um projeto que estou desenvolvendo em um teste para vaga de Emprego.
Estou tentando colocar uma imagem de fundo em um elemento
Olá Luiz, tudo bem?
Você pode colocar o código HTML e CSS completo para que eu possa visualizar melhor e te ajudar?
Fico no aguardo.
Olá Beatriz, estou bem obrigado.
<body>
<div class="container-lista">
<ul>
<li>
<h2>Serviços</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
<li>
<h2>Produtos</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
<li>
<h2>Contato</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
</ul>
</div>
</body>Nesse código, quero colocar os parágrafos um do lado do outro e colocar uma imagem de fundo no li, deixando como a imagem a seguir: Como deve ficar
Opa, Luiz.
Obrigada pelo retorno.
Ficou faltando o codigo CSS, se puder enviar aqui. Além disso, se puder enviar as imagens que vão ser utilizadas também, você pode fazer upload aqui no campo de respostas mesmo.
A sim, o código css coloquei na própria página, mas quando enviei não foi. Vou enviar de novo apra você e as imagens.
.container-lista {
widht: 980px;
margin: auto;
}
ul li {
display: inline;
Desculçpa, primeira vez que estou mexendo no Fórum, estou um pouco perdido.
Vamos lá, Luiz.
Notei que no CSS, ainda não existiam propriedades que fizessem com que os itens da lista estivessem dispostos um ao lado do outro e as caixas de cada item que irão conter a imagem também não estavam estilizadas, então precisei aplicar algumas propriedades básicas para que o layout começasse a ficar com o formato parecido com o modelo e resolvermos a questão da imagem.
Primeiro, eu recomendo que você crie um arquivo exclusivo para o CSS, para podermos aplicar as propriedades de uma forma mais organizada. Caso não saiba como fazer isso, a seguir está o passo a passo, caso contrário pode pular para o 4º passo.
Lá no editor, no mesmo local que está o arquivo HTML, você irá criar um novo arquivo. Não sei qual editor você está utilizando, mas será algo parecido com isso (clicar em file e depois new file):
Uma nova página irá abrir, você irá clicar CTRL + S e salvará com o nome style.css.
Vá até o arquivo HTML e acrescente dentro da tag <head>, o seguinte código:
<link rel="stylesheet" href="style.css"> <!--Conexão com o CSS-->Como queremos estilizar o container da <ul>, iremos mover a class="container-lista" da tag <div> para tag <ul>. Além disso, para cada item da lista, iremos acrescentar uma classe respectiva a ele
(class="item-servicos", class="item-produtos" e class="item-contato"). O código completo ficará assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>seu título aqui</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<div>
<ul class="container-lista">
<li class="item-servicos">
<h2>Serviços</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
<li class="item-produtos">
<h2>Produtos</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
<li class="item-contato">
<h2>Contato</h2>
<p>
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet,
</p>
</li>
</ul>
</div>
</body>
</html>Como citei anteriormente, acrescentei algumas propriedades ao .container-lista para que ele começasse a ficar um pouco mais próximo do modelo. Essas estilizações são referente a largura, altura, borda interna e espassamento entre as bordas dos itens. O código ficará assim:
.container-lista {
width: 980px;
margin: 0 auto;
padding: 50px 0;
border-spacing: 20px
}Para estilizarmos cada item da lista, também colocaremos algumas propriedades que irão dar forma ao layout, caso tenha dificuldade de entender alguma, fique a vontade para perguntar. Com os estilos aplicados abaixo, as modificações mais relevantes são:
Os itens da lista ficaram um ao lado do outro, ocupando igualmente o mesmo espaço em relação a altura e largura independemente da quantidade de texto (display: table-cell);
Irão caber nas restrições de tamanho do container pai (box-sizing: border-box;);
Irão ter uma borda arredondada (border-radius: 10px;);
A imagem de fundo não irá se repetir e ocupará 100% da altura e largura (background-repeat: no-repeat; e background-size: 100% 100%;), isso fará com que independente do tamanho do box da lista, as imagens ficarão no tamanho normal, sem cortar os lados.
O código ficará assim:
.container-lista li {
display: table-cell;
text-align: center;
width: 30%;
vertical-align: top;
padding: 30px 20px;
box-sizing: border-box;
border-radius: 10px;
background-repeat: no-repeat;
color: white;
height: 300px;
background-size: 100% 100%;
}Por último, você pode baixar as imagens e colocá-las na mesma pasta que os arquivos CSS e HTML. Em seguida, iremos chamar a classe correspondente de cada item e passar o caminho correto da imagem. Dessa forma:
.container-lista li.item-servicos {
background-image: url('imagem1.png');
}
.container-lista li.item-produtos {
background-image: url('imagem2.png');
}
.container-lista li.item-contato {
background-image: url('imagem3.png');
}É muito importante que o caminho para localizar a imagem esteja feito corretamente, senão a imagem não irá ser acessada e consequentemente não aparecerá.
O resultado final será esse:
Desculpa a explicação longa, mas realmente precisava colocar algumas propriedades básicas para poder chegar na questão da imagem. Além disso, o resultado não ficou idêntico ao modelo, pois me ative a sua dúvida, entretanto outras propriedades precisam ser acrescentadas para replicar a interface desejada.
Caso tenha alguma dúvida referente ao que foi explicado, fique a vontade para perguntar. Boa sorte no processo seletivo e bons estudos!
Legal, Excelente explicação, só não conheço essas duas propriedades: "display: table-cell" e "box-sizing: border-box".
Outra coisa, colei o código aqui mas apresentou um problema, a imagem não aparece toda e o raios inferios também não.
Luiz, se quiser dar uma olhada nesses tópicos que respondi, eles explicam detalhadamente cada uma dessas propriedades.
Acabei copiando aqui o código sem o segundo 100%, altere no.container-lista li, com o background-size: 100% 100%;, com isso a imagem aparecerá toda e o raios inferiores também.
Peço desculpas pelo ocorrido.
Nossa, muito obrigado, deu certo...Hehe...Me ajudou muito... Só tenho um outro problema no Body, que seria adicionar uma imagem, mas isso vou tentar resolver sozinho..rsrs