28172 sujets

CSS et mise en forme, CSS3

Bonjour,
dans une page sur mon site j'affiche des images dans les nom viennent de mysql.
pour ces images je souhaiterai appliquer un effet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.imgflou {
position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin:0;
    padding:0;
    background-size: 100% ;
    height: 800px;width:1200px;  
    color:black;
}
.imgflou:before {
        content: "";
        position: fixed;
        height: 800px;width:1200px;  
        background: url(../images/infos/appelgreve.jpg);
        background-size: cover;
        z-index: -1; /* Keep the background behind the content */     
        -webkit-filter: blur(8px);
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
    }
	
	.imgfloucontenu {

    height: 800px;width:1200px; text-align:center;

}

-->
</style>
</head>

<body>
<div class="imgflou">
    <div class="imgfloucontenu">
    	<img src="../images/infos/appelgreve.jpg" height="100%" />
    </div>
</div>
</body>
</html>


dans l'exemple ../images/infos/appelgreve.jpg est généré par php sql est j'ai donc un truc comme <?php echo $monimage; ?>

Comment pour la partie css je peu intégré le php ou comment adapté mon code sachant que le css de l'exemple est dans une feuille de style séparée.

mon but étant d'avoir au final ce type de rendu (l'image est prise au hasard)
Modifié par fabrice88 (11 May 2017 - 14:14)
Hello,
Le fait que le nom de l'image soit généré par du PHP sous la forme

<img src="<?php echo $image; ?>" alt="description">

au lieu de

<img src="une_image.jpg" alt="description">

ne change strictement rien pour l'utilisation d'une feuille de style, il n'y a rien à faire de spécial,
il suffit d'appeler la feuille de style de la manière habituelle :


<link rel="stylesheet" href="css/styles.css">

quel est le problème exactement ?