Dark mode - image de fond en repeat

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis l'installation du dark mode
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !

Actuellement dans l'installation du dark mode de mon forum test avec ma collègue graphiste, nous avons un potit problème pour l'installation de la toute première image (ça commence bien oui /sort)

Nous avons souhaité commencer par l'image de fond pour visualiser un peu le rendu des couleurs des catégories etc... et ce faisant, l'option repeat du background semble s'être désactivée, même avec l'ajout de balises !important à la suite. J'ai tenté de fixer le background avec un code trouvé ici (background-attachment:fixed il me semble) mais si l'image rest bien en place, la zone blanche lui passe dessus quand on défile et la recouvre.

EDIT : J'ai réussi à fixer le fond du thème clair depuis la gestion des images, maintenant en sombre on voit moitié le fond sombre-moitié le fond clair xD

Le petit bout de CSS correspondant au fond sombre :

Code:

[data-color-scheme=dark] body {   background: url(https://i.pinimg.com/564x/bf/58/65/bf58654a0961d804ee0a4f741821e70d.jpg);background-attachment:fixed!important;}

Je ne sais pas si vous avez besoin d'autre chose, n'hésitez pas ^^
Merci d'avance !

[MlleAlys]

Bonjour,
Dans cette version il faut appliquer le fond au body et au html aussi :
Remplacez [data-color-scheme=dark] body
par html[data-color-scheme=dark], [data-color-scheme=dark] body

[Yunie16]

Ca fonctionne parfaitement merci ** Dois-je mettre cette variable pour toutes mes modifications ? Le code de base était ceci pour mettre les changements dans le root :

Code:

 [data-color-scheme="dark"] { }

C'est la graphiste qui a trouvé d'enlever les guillemets pour l'image mais le reste est dans le code de base donc je ne sais pas si je dois tout rassembler pour un meilleur effet ou laisser séparés ?

Là ça donne ceci du coup avec votre conseil pour l'image :

Code:

/* VARIABLE DU MODE INVERSE (ici mode sombre) */
 [data-color-scheme="dark"] {
    --fond-blocs: #333;
    --couleur-texte: #fff;
    --couleur-secondaire: #605273;
  a {color:#fff;}
  --couleur-degrade:linear-gradient(#535aa6, #535aa6, #775c96, #775c96);
  --couleur-degrade2:linear-gradient(to right, #775c96, #775c96, #535aa6, #535aa6);
 

  }

html[data-color-scheme=dark], [data-color-scheme=dark] body {   background: url(https://i.pinimg.com/564x/bf/58/65/bf58654a0961d804ee0a4f741821e70d.jpg);background-attachment:fixed!important;background-repeat:repeat!important;}


[MlleAlys]

Il me semble qu'il existe d'autres techniques d'imbrication, mais que je connais moins ; Sinon a priori oui, chaque élément à modifier, vous devez ajouter [data-color-scheme="dark"] devant le sélecteur.

(le bout de code a {color:#fff;} fonctionne-t-il en mode sombre ? sinon, vous devez l'extraire pour le placer plus bas ainsi :
[data-color-scheme="dark"] a {color:#fff;}

[Yunie16]

Je pense avoir compris maintenant, merci **
En effet il ne fonctionnait pas, je l'avais laissé en me disant que je m'y pencherai plus tard xD Du coup l'astuce fonctionne, merci beaucoup pour votre aide !