Problème CSS : Deux images en Background.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème CSS : Deux images en Background.

Message par Saryon le Lun 23 Aoû 2010 - 13: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


Dernière édition par Saryon le Sam 28 Aoû 2010 - 2:18, édité 1 fois

Saryon
*

Masculin
Messages : 34
Inscrit(e) le : 27/01/2010

http://wingsofshadow.team-talk.net
Saryon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Fuox le Lun 23 Aoû 2010 - 21: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

Fuox
****

Masculin
Messages : 270
Inscrit(e) le : 02/09/2009

http://couloirsdepoudlard.forumactif.com
Fuox a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Sen Hime le Lun 23 Aoû 2010 - 23: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')";
}

Sen Hime
****

Féminin
Messages : 243
Inscrit(e) le : 24/03/2009

http://hyrulesjourney.fr-bb.com
Sen Hime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Saryon le Lun 23 Aoû 2010 - 23: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.

Saryon
*

Masculin
Messages : 34
Inscrit(e) le : 27/01/2010

http://wingsofshadow.team-talk.net
Saryon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Saryon le Mar 24 Aoû 2010 - 17:46

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

Saryon
*

Masculin
Messages : 34
Inscrit(e) le : 27/01/2010

http://wingsofshadow.team-talk.net
Saryon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Saryon le Jeu 26 Aoû 2010 - 3:16

UP tardif Very Happy
Help plz : /

Saryon
*

Masculin
Messages : 34
Inscrit(e) le : 27/01/2010

http://wingsofshadow.team-talk.net
Saryon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par CaptainFalcon92 le Jeu 26 Aoû 2010 - 5: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:
<!-- #ici truc modifié# --------------------------------->
<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.

CaptainFalcon92
***

Masculin
Messages : 124
Inscrit(e) le : 08/08/2008

http://sentinelleseriador.forums-actifs.com/
CaptainFalcon92 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS : Deux images en Background.

Message par Saryon le Sam 28 Aoû 2010 - 2:16

Merci beaucoups !
Ca marche Very Happy
Merci de vos réponses les gens Very Happy
Saryon

Saryon
*

Masculin
Messages : 34
Inscrit(e) le : 27/01/2010

http://wingsofshadow.team-talk.net
Saryon a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum