Partage
  • Partager sur Facebook
  • Partager sur Twitter

Réduire 1 sur 2 images dans background css

    22 octobre 2021 à 11:12:27

    Bonjour,

    Je suis novice j'apprend la progamation et je souhaiterais réduire la taille de ma 1ére image qui est en top right dans mon background mais je ne sais pas comment procéder vu que j'ais 2 images.

    Pourriez-vous m'aidez svp merci?

    Voici le code:

    body {

    background: url("unix.png") fixed no-repeat top right, url("fond.png") fixed;

    }

    • Partager sur Facebook
    • Partager sur Twitter
      22 octobre 2021 à 12:13:00

      Bonjour, 

      tu y es presque, il te manque juste pour chaque image le redimensionnement et le positionnement

      quelques infos ici :

      https://developer.mozilla.org/fr/docs/Web/CSS/background

      Là on voit comment positionner et redimensionner une image en background, entraîne-toi sur la première image d'abord pour acquérir la syntaxe,
      attention les images vont se superposer, avant d'avoir correctement positionner les deux

      • Partager sur Facebook
      • Partager sur Twitter
        22 octobre 2021 à 12:41:14

        Bonjour Chris Lebure, merci pour ta réponse je vais essayer sa.
        • Partager sur Facebook
        • Partager sur Twitter
          22 octobre 2021 à 13:12:56

          Si tu as des problèmes, montre le code de ce que tu as fait et on t'aidera à corriger
          • Partager sur Facebook
          • Partager sur Twitter
            22 octobre 2021 à 13:46:58

            Bonjour je reviens vers vous cars je n'arrive à trouver la bonne syntaxe du coup je n'arrive pas à diminuer l'image.
            • Partager sur Facebook
            • Partager sur Twitter
              22 octobre 2021 à 14:09:49

              MoradMenguellati a écrit:

              Bonjour je reviens vers vous cars je n'arrive à trouver la bonne syntaxe du coup je n'arrive pas à diminuer l'image.


              Peux tu montrer ton code afin de voir ce que tu as tenté de faire? Car avec le lien que te donne Chris tu devrai être capable d'obtenir le résultat souhaité.

              Voici un lien présent dans celui de Chris qui devrait t'aiguiller pour ton problème : https://developer.mozilla.org/fr/docs/Web/CSS/background-size

              • Partager sur Facebook
              • Partager sur Twitter

              Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                22 octobre 2021 à 14:12:52

                background: url("01.jpg")  abscisse ordonnée/largeur [hauteur] no-repeat

                abscisse et ordonnée peuvent être une valeur en pixels, ou bien en pourcentage du parent, ou bien top, left, right ou bottom

                largeur et hauteur en pixels ou pourcentage

                une image qu'on positionne en haut et à 12px de la gauche, et qui fera 100px sur 200px :

                background: url("01.jpg")  12px top / 100px 200px no-repeat


                Sinon on peut aussi écrire :

                div {
                  background-image: url("logo-alsacreations-com.png"), url("soif.jpg");
                  background-position: right bottom, 100px top;
                  background-repeat: no-repeat;
                }

                plus simple en décomposant les propriétés !

                Source : https://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html

                -
                Edité par ChrisLebure 22 octobre 2021 à 14:29:03

                • Partager sur Facebook
                • Partager sur Twitter
                  22 octobre 2021 à 14:34:05

                  Bonjour Lord morpheus,

                  Merci de te pencher sur mon problemeJ'ais rajouté la formule size 30px 50px aprés top right.

                  background: url("unix.png") fixed no-repeat top right size 30px 50px, url("fond.png") fixed;

                  }

                  merci pour ta réponse chris.

                  • Partager sur Facebook
                  • Partager sur Twitter
                    24 octobre 2021 à 12:03:28

                    même en enlevant size et en laissant 30px 50px rien ne se passe.

                    Pareil pour ma bordure rien ne se passe :

                    P

                    {

                    border-radius: 5px;

                    }

                    • Partager sur Facebook
                    • Partager sur Twitter
                      24 octobre 2021 à 13:46:25

                      Bonjour,

                      Il nous manque des infos pour t'aiguiller au mieux.

                      Voici donc un code fonctionnel que tu n'as plus qu'à reproduire. Je exprès dissocié chaque attribut pour te permettre de comprendre comment le double background fonctionne : https://jsfiddle.net/v2dapjwt/1/

                      Si après ça tu as encore des soucis, alors le problème viens d'ailleurs.

                      Bon courage!

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                        25 octobre 2021 à 15:02:05

                        Merci lord morpheus, je vais éssayer sa.
                        • Partager sur Facebook
                        • Partager sur Twitter

                        Réduire 1 sur 2 images dans background css

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        • Editeur
                        • Markdown