[Dúvida] Adicionar imagem no CSS

Usurname · Junho 29, 2017

Como faço pra adicionar imagens no CSS?

Eu tenho uma imagem anexada e gostaria de colocar uma imagem pra cada recurso no PainelSuperior da tela. Como posso fazer isso?

Gostaria de implementar um fundo também pro menu esquerdo com imagens. Se eu aprender como fazer ajuda.

Código:

<html>
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
	.texto {color:#B000FF;}
	
.static
{
	position:static;
}
.relativo
{
	position: relative;
	top: 1px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.PalavraTurno
{
	position: relative;
	top: 30px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.TurnosDisponiveis
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 40px;	
}
.Turno
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;
}
.PainelSuperiorRecursos
{
	position: relative;
	position: center;
	top: 10px;
	left: 300px;
	background-color: black;
	color: white;
	width: 900px;
	height: 60px;
}
.PainelOuro
{
}
.PainelComida
{
}
.PainelMadeira
{
}
.PainelFerro
{
}
.PainelPedra
{
}
</style>
</head>
<body>

<div class = "PainelSuperiorRecursos">
Recursos
</div>


<div class="PalavraTurno">
Turno
</div>


<div class="TurnosDisponiveis">
Turnos Disponíveis:
</div>

<div class="Turno">
</div>

<div class="relativo">


<script type="text/javascript">


var intervalo = window.setInterval('funcao()',1000);
var contador = 60;
var Turno = 0;

function funcao()
{ 
   while (contador <= 60)
   {   
	   if (contador == 0)
	   {
	      contador = 60;
		  Turno = Turno + 3;
		  break;
	   }
	   elementosHTML = document.getElementsByClassName("relativo");

	   elementosHTML[0].innerHTML = "   " + " " +contador;

	   contador--;
	    
	   break;
   }
   elementoTurno = document.getElementsByClassName("Turno");
   elementoTurno[0].innerHTML  = Turno;
}

</script>

<script type="text/javascript">



</script>


<?php


?>

</body>
</html>

Imagem Anexada:

Obrigado.

lowys · Junho 29, 2017

https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-image
https://www.w3schools.com/cssref/pr_background-image.asp
http://www.maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php

Editado Junho 29, 2017 por lowys

Jadson Reis · Agosto 1, 2017

- Recomendo criar uma folha de css, separada.

Entrar

[Dúvida] Adicionar imagem no CSS

Pergunta

Usurname

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Jadson Reis

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades