J’ai du mal à inclure le fichier bootstrap.min.css dans ce fichier. L’image d’arrière-plan que j’utilise ne remplit pas toute la page. J’ai essayé de changer le nom de la classe « conteneur », mais l’image d’arrière-plan disparaît soudainement, même av...

Publié le 27 septembre 2023 par Mycamer
<!DOCTYPE html>
<?php require_once("configure2.php"); ?>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Register form</title>
    <link rel="stylesheet" href="https://www.sitepoint.com/community/t/i-am-having-difficulty-including-the-bootstrap-min-css-file-to-this-the-background-image-i-am-using-is-not-filling-the-whole-page-ive-tried-changing-class-name-container-but-then-the-background-image-suddenly-disappears-even-with-the-right-link/bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="User/style.css">
    <script src="https://kit.fontawesome.com/f63bb9f33d.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <script src="scripts/jquery-3.7.1.slim.min"></script>
    <script src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
      <div class="row">
        <?php
        if(isset($_POST['signup']))
        {
            $username=$_POST['username'];
            $gmail=$_POST['gmail'];
            $password=$_POST['password'];
            if(strlen($username)<3)
            {
                $error[]='Please enter username using 3 characters atleast.';
            }
            if(!preg_match("/^^[^0-9][a-z0-9]+([_-]?[a-z0-9])*$/",$username))
            {
                $error[]='Invalid entry.Enter lowercase letters without any space and no number at the start';
            }
            if(strlen($password)<6)
            {
                $error[]='Password is not 6 characters long.';
            }
            $sql="select * from signup where (User_name="$username" or Gmail="$gmail");";
            $res=mysqli_query($con,$sql);
            if(mysqli_num_rows($res)>0)
            {
                $row=mysqli_fetch_assoc($res);
                if($username==$row['User_name'])
                {
                    $error[]='Username already exists.';
                }
                if($gmail==$row['Gmail'])
                {
                    $error[]='Gmail already exists';
                }
            }
            if(!isset($error))
            {
                $options=array("cost"=>4);
                $password = password_hash($password, PASSWORD_BCRYPT,$options);
                $result=mysqli_query($con,"insert into signup(User_name,Gmail,Psswd) values('$username','$gmail','$password')");
                if($result)
                {
                    $done=3;
                }
                else 
                {
                    $error[]='Failed:Something went wrong';
                }
            }
        }
        ?>
     </div>
     <div class="col-12">  
        <?php
        if(isset($error))
        {
            foreach($error as $error)
            {
                echo '<div class="alert alert-danger justify-content-center">';
                echo '<p class="errmsg">&#x26A0;'.$error.'</p>';
                echo'</div>';
            }
        }
        ?>
     </div>
        <?php if(isset($done))
        {?>
        <div class="successmsg"><span style="font-size:100px;">&#9989;</span><br>You have registered successfully.<br><a href="User/signin.php" style="color:#fff;">Login here...</a></div>
        <?php } else {?>
        <div class="form-box">
          <h1 id="title">Register</h1>
          <form  method="POST">
            <div class="input-group">
                <div class="input-field">
                   <i class="fa-solid fa-user"></i>
                   <input type="text" placeholder="User Name" id="uname" name="username" value="<?php if(isset($error)){ echo $_POST['username'];}?>" required>
                </div>
                <div class="input-field">
                    <i class="fa-solid fa-envelope"></i>
                    <input type="email" placeholder="Gmail" id="umail" name="gmail" value="<?php if(isset($error)){ echo $_POST['gmail'];}?>" required>
                </div>
                <div class="input-field">
                     <i class="fa-solid fa-lock"></i>
                     <input type="password" placeholder="Password" id="upsswd" name="password" value="<?php if(isset($error)){ echo $_POST['password'];}?>">
                </div>
                <div class="input-field">
                     <i class="fa-solid fa-lock"></i>
                     <input type="text" placeholder="House No" id="hsno" name="house" value="<?php if(isset($error)){ echo $_POST['house'];}?>">
                </div>
                <div class="input-field">
                     <i class="fa-solid fa-lock"></i>
                     <input type="text" placeholder="Locality" id="loc" name="localp" value="<?php if(isset($error)){ echo $_POST['localp'];}?>">
                </div>
                <div class="input-field">
                     <i class="fa-solid fa-lock"></i>
                     <input type="text" placeholder="Street" id="stret" name="street" value="<?php if(isset($error)){ echo $_POST['street'];}?>">
                </div>
                <div class="input-field">
                     <i class="fa-solid fa-lock"></i>
                     <input type="text" placeholder="Village" id="vllag" name="village" value="<?php if(isset($error)){ echo $_POST['village'];}?>">
                </div>
                <div class="btn-field">
                    <a href="User/signin.php">Already a user?</a>
                    <button type="submit" id="signupbtn" name="signup">Sign Up</button>
                </div> 
            </div> 
            </form>
        <?php }?>  
        </div>
    </div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    font-family:'Poppins',sans-serif;
    box-sizing:border-box;
}
.container{
    width:100%;
    height:100vh;
    background-image: url('background.jpg');
    background-position:center;
    background-size:cover;
    position:relative;
    max-height:400px;
    overflow-y: auto;

Si vous souhaitez que l’arrière-plan remplisse toute la page, il doit être défini en HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      margin: 0;
      padding: 0;
      background: url('your-image.jpg') no-repeat center center fixed;
      background-size: cover;
    }
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: transparent;
    }
  </style>
</head>
<body>
  <!-- Your content here -->
</body>
</html>



1 J’aime


PaulOB

26 septembre 2023, 16h41


3

.container{
    width:100%;
    height:100vh;
    background-image: url('background.jpg');
    background-position:center;
    background-size:cover;
    position:relative;
    max-height:400px;
    overflow-y: auto;

Si vous parlez de l’image d’arrière-plan dans le code ci-dessus, cet élément a une hauteur maximale de 400 pixels. Son image d’arrière-plan ne s’étendra pas à l’extérieur de son conteneur bien qu’elle couvrira son contenu à l’intérieur de ce conteneur.

BTW, la classe conteneur est une classe d’amorçage et utilisée partout, vous ne devez donc jamais la modifier directement. Modifiez-le par tous les moyens mais utilisez une classe personnalisée pour le faire.

to www.sitepoint.com


Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931