Problème CSS : Deux images en Background.

4 participants

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

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

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

Sen Hime
****

Féminin
Messages : 249
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 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.
avatar

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 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 ?
avatar

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 Jeu 26 Aoû 2010 - 3:16

UP tardif Very Happy
Help plz : /
avatar

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

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 Sam 28 Aoû 2010 - 2:16

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

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

- Sujets similaires

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