Background-image css3 no Uncina

Asked

Viewed 92 times

2

Good morning, everyone,

I am trying to put an image as background of my html page but it is not working.

Would anyone know to indicate the error of my code?

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 of folder organization

Print da organização das pastas

html5 css3 background-image

  • Where are you carrying this index.css?

  • I put the name of the wrong file reference in the question, I will edit.

  • 1

    Tries "./img/doctorBackground.jpg". The way it is, the briefcase img should be inside the briefcase /css.

  • 1

    It would be interesting to put an image of how is the organization of your folders, take a print ai of the open directory showing how are the project folders.

  • @Sam I had already tried that way and it still doesn’t work.

  • Gives some error in the browser console?

  • Some warnings appear in javascript, but I believe that this does not influence the css part.

  • 1

    Go to inspect browser elements and click on the "body" tag and see the CSS properties.

Show 3 more comments

1 answer

2


Your path is wrong, your folder structure is so correct:

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

Note that the .php and the folders are at the root...

Then you have to "leave" the folder css using the ../ at the beginning of the image path, and then enter the folder img and index the image. Then the path will look like this:

../img/doctorBackground.jpg

I recommend you read this: Which means the two dots in a row (..) in a file path? and this: Path to access html folders ,css,php etc

EDIT

In his <head> reverses the indexing order of .css note that in your document you first index your "custom.css" as registerPatient.css and menu.css and only then the bootstrap.css.

Most likely the bootstrap.css is doing an overlay of classes and taking the styles of the background of body. So leave the indexing this way, because it may solve the problem... First the CSS of Bootstrap, and only then yours .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">

  • I put the two dots in and tested with and without quotation marks, and it still doesn’t work.

  • @Lauraregina I don’t know if it has to do with it, but it doesn’t exist width: device-width; vc can see here https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport that he says it is for you to declare the device-width and not to use device-width as a value of width... See in the list of possible values that there is no option to device-width, just min-width, max-width and width. I tested your code here with background-image: url("https://placecage.com/100/100") !important; and it worked! http://prntscr.com/njxlk0

  • @Lauraregina read the EDIT that I put in the answer, that should solve the problem!

  • @hugocsi nay I’m using background-image: url("https://placecage.com/100/100") ! Important; am using background-image: url(".. /img/doctorBackground.jpg");

  • The error was the css call order combo, the syntax of how I was looking for the image in the directories and finally realized that I renamed the file and didn’t remember it (I discovered this in the browser inspector, because I was informed that I couldn’t find the file, so I went to compare the name you showed in the browser with the name that was in the server folder). Thank you all for your help!

  • 1

    @Lauraregina good that solved, the CSS test I did was just a matter of eliminating possibilities of where the error would be, and testing with an external image link would already eliminate the error in CSS. But nice that solved!

Show 1 more comment

Browser other questions tagged html5 css3 background-image

You are not signed in. Login or sign up in order to post.