<!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">⚠'.$error.'</p>';
echo'</div>';
}
}
?>
</div>
<?php if(isset($done))
{?>
<div class="successmsg"><span style="font-size:100px;">✅</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.
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
Jeu de briques
Snake
Pacman
Bubble