I am having difficulty including the bootstrap.min.css file to this.The background image i am using is not filling the whole page.I've tried changing class name 'container' but then the background image suddenly disappears even with the right link

<!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="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;

If you want the background to fill the whole page it needs to be set in 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>
2 Likes

If you are talking about the background image in the code above then that element has a max height of 400px. Its background image won’t extend outside its container although it will cover its content inside that container.

BTW the container class is a bootstrap class and used everywhere so you should never alter it directly. Modify it by all means but use a custom class to do it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.