Page de fond avec "::before"

Par Dieunel le 29 Avril 2020 à 15:31 (Édité) 17 +99

Bonjour,


affin d’intégrer un fond a ma page html, et de pouvoir lui mettre des "FILTER" sans que ça ne change tout le contenu de la page, j'utilise ::BEFORE.


Mais j'ai un petit soucis de rien du tout mais que je ne comprend pas, lorsque j'inser mon code sur mon fichier CSS ça ne fonctionne pas alors que lorsque je le met entre les balise <style></style> de mon fichier HTML ça le prend en compte .


Je veux dire par la que l'image de fond mis en "background_image: url('fond.jpg");" n’apparaît pas du tout. Est ce que vous savez pourquoi ?


Dans l'attente de vous lire 🙂


body{
	width: 100%;
	height: 100%;
}


body::before{
content: "";


position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;


background: url("images/fond3.png");
background-size: cover;
background-repeat: repeat;


filter: brightness(25%);
  


}
Cette pub permet au site de vivre ...

17 commentaires

Re:


Très bien ! 😉 On n'attends que toi 😉

@Jerem971


Salut, pour le moment je suis en train de refaire mon code ,bien plus proprement, une fois que ce serra fait je reviens sur mon poste pour avoir de l'aide.

Re:


Je ne comprends toujours pas...

Mais montre-nous ton code, on va essayer de débug ensemble 😉

RE!


Ce que je veux faire je l'ai déjà fait vue que ça fonctionne.


Juste que je ne comprend pas pourquoi lorsque je met le même code copié collé dans mon fichier CSS ça ne fonctionne pas, alors que dans mon fichier html en balise "<style> </style>" ça fonctionne.


Je te montre en image le résultat :



Alors, l'arc-en-ciel qui prend toute la zone externe c'est une image,



Au centre , dans le grand rectangle tu peux y voir UNE image (je ne parle pas des logos) sur laquelle il y a une couleur ensuite de fond un peu transparente ce qui me donne une jolie texture.

Une image de fond qui a aussi un ::before



Pour que l'image integrée au BODY soit moins agressive à l'oeil, je l'ai donc intégrée avec BODY::BEFORE comme ça je peux la modifier sans que les autres images qui héritent directement au propriétées FILTER que j'ai mis dessus soient affectées .


Est ce que tu comprend mieux ce que j'ai fais ?

Re:


On va reprendre depuis le début...

Que veux-tu faire exactement ? 🤔

@Jerem971


J'ai été voir , non ça ne m'a pas aidé.


je crois que je l'ai dis dans mes premiers messages : Insert un pseudo élément affin de pouvoir faire mu-muse avec des " filter" . Si je n'utilise pas cette astuce que j'ai trouvé, lorsque par exemple j'ai une page html simple, que je met un background au body, et que se background je souhaite lui ajouter le filter: grayscale(100%) , et bien la div contenue du coup dans le BODY va aussi hériter de se : filter: grayscale(100%) . En utilisant le pseudo élement BEFORE ça rend les contenus indépendants 😀


<html>
<head>
	
	
	<style type="text/css">
       body
        {
          background-image: url("image.png");
          background-size: cover;
          background-repeat: no-repeat;
          
           filtergrayscale(100%);
        } 

        div
        {
           background: red;
        }
                   
                    
    </style>
                    
                    
                    </head><body>
                    
                        <div> test </div>
                        
                     </body></html>

Re:


Tu n'as pas répondu à ma question... 😬

Pourquoi utiliser les pseudo-éléments pour mettre en fond une image ? 🤔

Je pense que la réponse de @CoodYe devrait résoudre ton soucis, est-ce le cas ? 🤔

Salut @Jerem971


j'ai vue qu'il mettait un z-index :0 Mais si on ne le spécifie pas, il n'est pas sensé êtres a 0 de base ? ?

salut @Kam3leoN


Oui elle y est bien et la aussi j'ai essayé " " OU ' ' ,,,,

salut @CoodYe


j'ai essayé tout ça, il y c'est assé déconsertant le comportement de mes fichiers ! parfois ça marche avec " " , parfois ca marche avec ' ' , et la j'ai carrément enlever les guillemets et ça marche aussi,,,,est ce que ça ne viendrait pas plutot d'un soucis de Latence ?

Cette pub permet au site de vivre ...