0

[SCRIPT] Definir imagem como background de uma <div>

criado por Felipe M. @LipESprY em 19/04/2017 8:42am
Fala aí, manos.

Conforme pedido do Cláudio/RJ, preparei esse script.

Link da postagem do Cláudio/RJ: http://phpbrasil.com/phorum/read.php?1,194126,194126#msg-194126

Zipei todo o projeto e fiz upload aqui.

PS: Não tem nada a ver com programação em PHP!

index.php
<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html"; charset="utf-8" http-equiv="content-type">
		<meta content="Site Hotel LOREM IPSUM" name="description">
		<title>Hotel LOREM IPSUM</title>
		<link rel="stylesheet" href="css/estilos_gerais.css" type="text/css">
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
		<script>
			$(function() {$( "#calendario" )
			.datepicker({changeMonth: true,
			ChangeYear: true,
			showOtherMonths: true,
			selectOthersMonths: true,
			dateFormat: 'dd/mm/yy',
			dayNames:['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
			dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
			dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
			monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho',
			'Agosto','Setembro', 'Outubro', 'Novembro', 'Dezembro'],
			monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out',
			'Nov', 'Dez']});});
		</script>
	</head>
	<body class="corpo-documento">
		<div class="topo-pagina">
			Conteúdo da div: topo-pagina
		</div>
		<div class="base-pagina">
			Conteúdo da div: base-pagina
		</div>
		<div class="pagina">
			Conteúdo da div: pagina
		</div>
		<div class="main">
			Conteúdo da div: main
		</div>
		<div class="header">
			Conteúdo da div: header
		</div>
		<div class="header-topo">
			Conteúdo da div: header-topo
		</div>
	</body>
</html>


css/estilos_gerais.css
.topo-pagina {
	background-image: url('../imagens/imagem-topo-pagina.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height: 250px; /* ADICIONEI ESSA LINHA, POIS A DIV NÃO TEM CONTEÚDO, LOGO, NÃO IRIA APARECER NO NAVEGADOR */
	float: left;
}

.base-pagina {
	background-image: url('../imagens/imagem-topo-pagina.jpg');
	background-repeat: repeat-x;
	background-position: left bottom;
	width: 100%;
	height: 250px; /* ADICIONEI ESSA LINHA, POIS A DIV NÃO TEM CONTEÚDO, LOGO, NÃO IRIA APARECER NO NAVEGADOR */
	float: left;
}

imagens/imagem-topo-pagina.jpg
<ARQUIVO DE IMAGEM>
Data Autor Changelog Download Deletar
19/04/2017 8:42am Felipe M. @LipESprY - Versão 1

Comentários:

Nenhum comentário foi enviado ainda.

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)