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

esse usuário está entre os 10 maiores contribuidores do site

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
19/04/2017 8:42am	Felipe M. @LipESprY	-	Versão 1

Comentários:

Nenhum comentário foi enviado ainda.

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

Comentários:

Novo Comentário: