Problème CSS : Deux images en Background.

par Saryon Lun 23 Aoû - 11:21

Bonjour ou Bonsoir Very Happy

J'ai un petit problème.
Dans peu de temps j'aimerais changer le background de mon forum, en un background formé de deux images.
Des amis qui s'y connaissaient un peu en css m'ont déja indiqué la manière pour mettre une image en background, en haut a gauche.

Code:: body { background-image:url('Mon_image'); background-position:top left; background-repeat: no-repeat; }

Donc j'aimerais faire la même chose, mais en mettant en plus de cette image en haut a gauche, une autre image en bas à droite.
J'ai essayé ca : ( car deux images en body s'écrasent )

Code:: Html { background-image:url('http://a.imageshack.us/img824/9118/76283dsmrender1.png'); background-position:bottom right; background-repeat:no-repeat; } body { background-image:url('http://a.imageshack.us/img820/3876/40493dsmrender2.png'); background-position:top left; background-repeat: no-repeat; }

Mais la 1ère image se trouve coupée en bas à droite, par une sorte de cadre blanc Surprised

.
Pouvez vous me donner le code css qui pourrait afficher une image en haut à droite, et une autre en bas à gauche ?
Donc voici l'adresse de mon forum :
http://wingsofshadow.forumactif.org/index.htm
Je vous passe une image représentant le résultat désiré :
http://a.imageshack.us/img163/3596/donc.jpg
Je vous remercie d'avance pour la réponse fournie Very Happy

Saryon

par Fuox Lun 23 Aoû - 19:42

Bonjour,
Je croit qu'il n'est pas possible d'avoir deux images de fond. Il serait néanmoins possible de réaliser ce que vous voudriez faire, mais en passant par les templates si la version de votre forum le permet.

Cordialement,
Fuox

par Sen Hime Lun 23 Aoû - 21:16

C'est possible d'avoir plusieurs arrières-plans, mais uniquement avec le CSS3, qui n'est pas forcément bien pris en compte sur tous les navigateurs ou les navigateurs plus anciens (à tester) :
http://www.w3.org/TR/css3-background/#layering

Exemple de syntaxe tiré de http://www.impressivewebs.com/css3-click-chart/

Code:: #multi-bg { background: url(images/bg-cake.gif) center center no-repeat, url(images/bg-diamond.gif) top left repeat; } /* Below is for IE6-8 */ #multi-bg { background: transparent url(images/bg-diamond.gif) repeat top left; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-cake.gif', sizingMethod='crop'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-cake.gif', sizingMethod='crop')"; }

par Saryon Lun 23 Aoû - 21:24

D'abobrd, merci de votre réponse rapide.
J'aimerais bien essayer par les templates Very Happy

Dites moi juste ce qu'il y a à faire, et je vais essayer.

par Saryon Mar 24 Aoû - 15:46

Up =/*
J'aimerais savoir comment faire, si possible avec n'importe quelle facon ...
Quelqu'un peut m'aider ? un code ?

par Saryon Jeu 26 Aoû - 1:16

UP tardif

Help plz : /

par CaptainFalcon92 Jeu 26 Aoû - 3:12

Salut. l'avantage de la méthode template c'est que ça seras lisible par presque tout les navigateurs.
Même si le css3 reste une merveille, on a encore quelques nullité à la IE qui font les difficiles. =)

Alors pour celà, tu dois rajouter une division qui englobe tout le forum.
On va ouvrir une div dans le template "overall_new_header"
On repère la balise body et on écris ce qui suis juste en dessous

Code:: <div id="background_2">

ensuite dans le template overall_footer, juste avant la fermeture du body, on ferme notre div.

Code:: </div>

on oublie pas de cliquer sur les croix vertes pour publier.

Dans le css, on écris enfin ce qui nous intéresse dans ton cas :

Code:: div#background_2{ height:100%; width:100%; margin:0; padding:0; background:transparent url(http://adresse_de_ton_image.bidule) right bottom no-repeat; }

Si tu trouve pas la balise body; ça ressemble simplement à ça, et il n'y en a qu'une ouverte, une fermée dans toute ta page.

Code:: - dans header ------ <body attribut="truc" attribut="truc" attribut="truc"> - dans footer ------ </body>

Dis moi si je t'aide ou si c'est pire.

astuce : pour repérer tes modification rapidement, ajoute des commentaires.
exemple :

Code::  <code></code> Comme ça après tu recherche (ctrl+f) le nom de la modification. ça va plus vite que de lire la page entière.