2

Bom dia pessoal,

estou tentando colocar uma imagem como background da minha página html mas não esta funcionando.

Alguém saberia indicar qual o erro do meu código?

index.html

<!DOCTYPE html>

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pain Free</title>
    <meta name="description" content="Site voltado para manipular doencas de pacientes que utiizando o app do pain free">
    <meta name="Laura" content="">
    <link rel="stylesheet" href="./css/registerPatient.css">
    <link rel="stylesheet" href="./css/menu.css">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <link rel="stylesheet" href="css/ie.css">
    <![endif]-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="js/responsive-nav.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>      
</head>

<body>

  <?php include ("class/menu.php"); ?>
        <!-------------------------------- FORMULARIO DE CADASTRO DE PACIENTE ----------------------------->
          <section id="register_patient">
              <div class="container_register_patient">
               <form  action="cadastro.php" method="POST">
               <label for="inputCity" class="title"><b>Informações Básicas</b></label>
                  <div class="form-row">
                    <div class="form-group col-md-5 ">
                      <input type="text" name="nome" class="form-control" id="inputEmail4" placeholder="Nome Completo">
                    </div>
                    <div class="form-group col-md-5">
                      <input type="text" name="cpf" class="form-control" id="inputEmail4" placeholder="CPF">
                    </div>
                    <div class="form-group col-md-5">
                      <input type="email" name="email" class="form-control" style="border:3px solid green" placeholder="Email do Aplicativo">
                    </div>
                    <div class="form-group col-md-5">
                      <input type="password" name="senha" class="form-control" style="border:3px solid green" placeholder="Senha do Aplicativo">
                    </div>
                  </div>
</div>
          </section>

<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>

</body>
</html>

registerPatient.css

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body
{
    margin: 0px;
    text-align: center;
    background-image: url("img/doctorBackground.jpg") !important;
}
/* ===================== CADASTRO DE PACIENTE ========================= */
#register_patient
{
    width: 45em;
    height: 56.5em;
    margin: 0 auto;
    padding-left: 6em;
    background-color: #F3F3F3;  
}

.container-register-patient
{
    margin: 0 auto;
    float: center;
    padding: 0px;
} 

print da organização das pastas

Print da organização das pastas

8
  • Onde vc está carregando esse index.css?
    – Sam
    Commented 3/05/2019 às 12:18
  • Coloquei o nome da referência do arquivo errada na pergunta, vou editar.
    – Luke
    Commented 3/05/2019 às 12:22
  • 1
    Tenta "./img/doctorBackground.jpg". Do jeito que está, a pasta img deveria estar dentro da pasta /css.
    – Sam
    Commented 3/05/2019 às 12:23
  • 1
    Seria interessante vc colocar uma imagem de como está a organização das suas pastas, tira um print ai do diretório aberto mostrando como está as pastas do projeto.
    – hugocsl
    Commented 3/05/2019 às 12:36
  • 1
    Vai em inspecionar elementos do navegador e clique na tag "body" e veja as propriedades do CSS.
    – Sam
    Commented 3/05/2019 às 13:34

1 Resposta 1

2

Seu caminho está errado, sua estrutura de pasta está assim correto:

BACKOFFICE (Pasta do projeto)
  css
    > registerPatient.css
  img
    > doctorBackground.jpg
  index.php 

Repare que o .php e as pastas estão na raiz...

Então vc tem que "sair" da pasta css usando o ../ no início do path da imagem, e depois entrar na pasta img e indexar a imagem. Então o caminho vai ficar assim:

../img/doctorBackground.jpg

Recomendo que leia isso: O que significam os dois pontos seguidos (..) num caminho de arquivo? e isso: Caminho para acesso de pastas html ,css,php etc


EDIT

No seu <head> inverta a ordem de indexação dos .css repare que no seu documento primeiro vc indexa os seus "custom.css" como registerPatient.css e menu.css e só depois o bootstrap.css.

Muito provavelmente o bootstrap.css está fazendo uma sobreposição de classes e tirando os estilos do background do body. Então deixe a indexação dessa forma, pois pode ser que resolva o problema... Primeiro o CSS do Bootstrap, e só depois os seus .css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="./css/menu.css">
<link rel="stylesheet" href="./css/registerPatient.css">
6
  • Coloquei os dois pontos e testei com e sem aspas, e ainda não funciona.
    – Luke
    Commented 3/05/2019 às 13:07
  • @LauraRegina não sei se tem a ver, mas isso não existe width: device-width; vc pode ver aqui developer.mozilla.org/en-US/docs/Web/CSS/@viewport que ele fala que é para vc declarar o device-width e não para usar device-width como valor do width... Veja na lista dos possíveis valores que não existe a opção de device-width, apenas min-width, max-width e width. Eu testei seu código aqui com background-image: url("https://placecage.com/100/100") !important; e funcionou! prntscr.com/njxlk0
    – hugocsl
    Commented 3/05/2019 às 13:16
  • @LauraRegina leia o EDIT que coloquei na resposta, isso deve resolver o problema!
    – hugocsl
    Commented 3/05/2019 às 13:25
  • @hugocsi eu não estou usando background-image: url("placecage.com/100/100") !important; estou utilizando background-image: url("../img/doctorBackground.jpg");
    – Luke
    Commented 3/05/2019 às 13:57
  • 1
    @LauraRegina que bom que resolveu, o teste do CSS que fiz foi apenas uma questão de eliminar possibilidades de onde o erro estaria, e testando com um link de imagem externa já eliminaria o erro no CSS. Mas legal que resolveu! 💪
    – hugocsl
    Commented 3/05/2019 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .