Bonjour, je suis débutant avec CSS et je voudrais mettre deux images de fond pour une classe titre (une à gauche et une à droite). J'ai vu que l'on pouvait utiliser background-image mais que pour une image. C'est possible ou pas ?
Merci.
Version imprimable
Bonjour, je suis débutant avec CSS et je voudrais mettre deux images de fond pour une classe titre (une à gauche et une à droite). J'ai vu que l'on pouvait utiliser background-image mais que pour une image. C'est possible ou pas ?
Merci.
Tu dois parametrer la position de tes images
exemple:
Code:
2
3
4
Merci, je viens d'essayer et cela ne semble pas fonctionner. Seule la seconde image est prise en compte (l'autre n'est pas affichée).
As-tu regardé si le problème ne venait pas des tailles ou des répertoires? Je l'ai déjà sur mes sites et celà fonctionne :wink:
Je voudrais bien voir un de tes sites où cela fonctionne ! 8OCitation:
Envoyé par v4np13
Lorsque tu as 2 règles concernant le même attribut, c'est la dernière qui écrase l'autre (à quelques exceptions de priorité).
Tout ce que ça va donner, c'est que tu n'auras que l'image de droite.
Pour réussir ce genre de supersposition d'images, il faut 2 éléments, par exemplechacun ayant un morceau de l'image.Code:<div><a>...</a></div>
Au niveau des répertoires, tout va bien. En ce qui concerne les tailles j'ai une image en 120x63 et une en 96x63. Par contre, je teste avec EasyPhp ...Citation:
Envoyé par v4np13
Oui, c'est bien ce qui se passe.Citation:
Envoyé par Ricou13
C'est bien ce que je redoutais, cela va m'obliger à modifier plusieur fois mon code html plutôt que de modifier une seule fois le css.Citation:
Envoyé par Ricou13
Merci.
Je l'avais avec 3 fois le même attribut:Citation:
Envoyé par Ricou13
Et ça marchait, mais j'ai changé parce que ça cachait le texte, actuellement il y a en a toujours deux (transparent et une image).Code:
2
3
4
5
Vous pouvez regarder ici dans le paragraphe avec le rappel théorique et ça marche, on a bien l'image et le fond transparent (pour voir, il faut réduire la fenêtre et le quadrillage vient se mettre derriere le texte) :wink:
Non, il n'y a pas 2 images ! Tu as une couleur de fond et une image. Ce n'est pas la même chose.Citation:
Envoyé par v4np13
Quand tu mets(2 fois d'ailleurs dans #theo), ce n'est pas une image transparente que tu appliques mais une couleur de fond. Tu n'utilises que très partiellement la propriété. C'est comme si tu faisait unCode:background: transparent;
qui est plus clair.Code:background-color: transparent;
Ensuite lelui, ajoute une image. Comme tu n'y définit pas la couleur de fond, il prend celle de la règle précédente qui définit la couleur à "transparent".Code:background: url(images/bdr.png) right bottom no-repeat;
Tu pourrais tout aussi bien écrireque cela reviendrait au même. J'en ai profité pour remettre les différents attributs dans l'ordre logique de la propriété raccourcie.Code:background: transparent url(images/bdr.png) no-repeat bottom right;
Rappel:wink:Citation:
'background'
Valeur : [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : admis pour la propriété 'background-position'
Médias : visuel
La propriété 'background' est une propriété raccourcie qui sert à regrouper les propriétés individuelles 'background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position' dans la feuille de style.
La propriété 'background' distribue d'abord à toutes les propriétés individuelles d'arrière-plan à leur valeur initiale, puis leur applique les valeurs explicites de la déclaration.