Discussion :

[ZeImp]

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.

[v4np13]

Tu dois parametrer la position de tes images

exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.titre{
	background: url(images/gauche.jpg) left no-repeat;
	background: url(images/droite.jpg) right no-repeat;
}

[ZeImp]

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).

[v4np13]

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

[Ricou13]

Tu dois parametrer la position de tes images

exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.titre{
	background: url(images/gauche.jpg) left no-repeat;
	background: url(images/droite.jpg) right no-repeat;
}

Je voudrais bien voir un de tes sites où cela fonctionne !
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 exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><a>...</a></div>

chacun ayant un morceau de l'image.

[ZeImp]

As-tu regardé si le problème ne venait pas des tailles ou des répertoires?

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 ...

[ZeImp]

Tout ce que ça va donner, c'est que tu n'auras que l'image de droite.

Oui, c'est bien ce qui se passe.

Pour réussir ce genre de supersposition d'images, il faut 2 éléments, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><a>...</a></div>

chacun ayant un morceau de l'image.

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.

Merci.

[v4np13]

Tu dois parametrer la position de tes images

exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.titre{
	background: url(images/gauche.jpg) left no-repeat;
	background: url(images/droite.jpg) right no-repeat;
}

Je voudrais bien voir un de tes sites où cela fonctionne !
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.

Je l'avais avec 3 fois le même attribut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.titre{
   background:transparent;
	background: url(images/gauche.jpg) left top no-repeat;
	background: url(images/droite.jpg) right  bottom no-repeat;
}

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).
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)

[Ricou13]

actuellement il y a en a toujours deux (transparent et une image).
Vous pouvez regarder ici dans le paragraphe avec le rappel théorique et ça marche, on a bien l'image et le fond transparent

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.
Quand tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: transparent;

(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 un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-color: transparent;

qui est plus clair.

Ensuite le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: url(images/bdr.png) right bottom no-repeat;

lui, 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".

Tu pourrais tout aussi bien écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: transparent url(images/bdr.png) no-repeat bottom right;

que cela reviendrait au même. J'en ai profité pour remettre les différents attributs dans l'ordre logique de la propriété raccourcie.

Rappel

'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.