CSS qui s'adapte a l'image background

22 novembre 2015 à 21:37:19

Bonjour, alors voila j'ai un site ou il y a 4 images de background pour ma page "login" qui change a chaque connexion via le code suivant (dans le php )

<!-- class CSS DES IMAGES --> 
<style type="text/css">
  <!--
.Image1 {background: url(Images/login1.png) no-repeat center top}
.Image2 {background: url(Images/login2.png) no-repeat center top}
.Image3 {background: url(Images/login3.png) no-repeat center top}
.Image4 {background: url(Images/login4.png) no-repeat center top}
 -->
 
  </style>
<!-- class CSS DES IMAGES --> 
  </head>
  <body class="Image<?php echo rand(1,4); ?>"> 
<!-- echo rand avec le nombre d images (1,4 dans cet exemple car il y a 4 images ) -->  
  </body>

ça fonctionne très très bien mais j'aurais voulu savoir si il existé un moyen d'adapter le code css selon l'image affiché pour déplacer les cases "ID" et "PWD" dans le même genre que le "@media"

je souhaiterai que sur la 2éme image les cases soit plus a gauche

cela est-il possible?

css? JS? HTML? PHP?

merci

Lamecarlate

22 novembre 2015 à 21:50:34

C'est possible avec CSS, puisque tu donnes une classe particulière à body. Tu peux utiliser la cascade :

form {
   /* une définition */
}

.Image2 form {
   /* une définition qui surcharge la précédente */
}

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Nathann83

23 novembre 2015 à 13:06:13

salut Lamecarlate, merci pour votre réponse mais je ne comprend pas le css, pourquoi "form" ??

Lamecarlate

23 novembre 2015 à 13:15:31

Parce que tes inputs sont bien dans un formulaire, non ? Enfin, c'était un exemple, puisqu'on n'a pas ton html complet… L'idée, c'est de cibler des éléments dont le parent est ".Image1, 2 ou 3", etc.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Nathann83

23 novembre 2015 à 21:19:42

ok voila mon code php au complet

<?php 
// Define your username and password 
$username = "***"; 
$password = "***"; 
if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) { 
if (isset($_POST['txtUsername']) && $_POST['txtPassword'] != $password ){
	header ('location:403.html');}
?> 
<body>
<link rel="shortcut icon" href="http://***/images/default.png" />
<link rel="stylesheet" href="CSS/Site_Clippings2.css">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="texte">
<font color="black">Accès à la</font> <font color="green">MS</font> /<font color="green"> MSirc</font> / <font color="black">Modo</font> / <font color="red">Smodo</font></p>
<p>
<form ; name="form"; method="post"; action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
    <p class="text"><label for="txtUsername">Utilisateur:</label> 
    <br><br>
    <input class="case" type="text" name="txtUsername" /></p> 
    <p class="text"><label for="txtPassword">Mot de passe:</label> 
    <br><br>
    <input class="case" type="password" name="txtPassword" /></p> 
    <input class="button" type="submit" name="Submit" value="Entrée" /> 
</form></p></body>

<!-- class CSS DES IMAGES --> 
<style type="text/css">
  <!--
.Image1 {background: url(Images/login1.png) no-repeat center top}
.Image2 {background: url(Images/login2.png) no-repeat center top}
.Image3 {background: url(Images/login3.png) no-repeat center top}
.Image4 {background: url(Images/login4.png) no-repeat center top}
 -->
 
  </style>
<!-- class CSS DES IMAGES --> 
  </head>
  <body class="Image<?php echo rand(1,4); ?>"> 
<!-- echo rand avec le nombre d images (1,4 dans cet exemple car il y a 4 images ) -->  
  </body>

<?php 
} 
else { 
?>

mais je ne comprend pas trop le css je début dans ce monde

je souhaite que le "form" soit a droite ou agauche selon l'image background Image1, Image2 .....

Lamecarlate

23 novembre 2015 à 23:02:37

Il faut absolument revoir l'architecture de ton code.

Ça doit ressembler à ça :

<?php
// Define your username and password
$username = "***";
$password = "***";
// le reste de ton code PHP
?> 
<!doctype html>
<html>
<head>
  <!-- ici ton CSS, ton title, ta favicon etc -->
</head>
<body class="Image<?php echo rand(1,4); ?>"> 
  <-- ici le contenu de ta page : textes, formulaires, etc -->
</body>
</html>

Et il faut que tu enlèves aussi ces vilaines balises <font>, dépréciées depuis plus de 10 ans.

Également : <form ; name="form"; method="post"; action="<?php echo $_SERVER['PHP_SELF']; ?>"> ça s'écrit sans les ";"

Pas d'aide concernant le code par MP, le forum est là pour ça :)