2 images en fond sur <body> sur une page web.

NO-SOS Messages postés 381 Date d'inscription   Statut Membre Dernière intervention   -  
NO-SOS Messages postés 381 Date d'inscription   Statut Membre Dernière intervention   -
Salut à tous,
J'aimerais savoir comment mettre deux images en fond sur une page web.
L'idée c'est que j'ai "image1.jpg" et "image2.jpg".
"image1.jpg" va s'afficher en haut à gauche de la page, et "image2.jpg" va s'afficher en haut à droite.

j'ai ce code en css : 
body  
{  
     background-image : url("image1.jpg") ;  
     background-repeat : no-repeat ;  
     background-position : top left ;  
}

Mais si j'en fais deux dans le même fichiers, comme : 
body  
{  
     background-image : url("image1.jpg") ;  
     background-repeat : no-repeat ;  
     background-position : top left ;  

     background-image : url("image2.jpg") ;  
     background-repeat : no-repeat ;  
     background-position : top right ;  
}

L'une des deux images ne va pas s'afficher en fond. Hors, moi, ce que je veux, c'est qu'elle s'affiche toute les deux.

Si quelqu'un a la possibilité de m'aider le plus rapidement possible, je l'en remercie d'avance.
A bientôt.

(ps : si je ne suis pas très clair, dites le, merci encore.)





"Le but ce n'est pas de faire du cinéma, mais son cinéma."
-de Albert Dupontel-

2 réponses

Réponse 1 / 2
mpmp93
 
Bonjour,

C'est impossible en décrivant les deux images dans le css affecté à BODY.

La solution c'est de créer un autre élément FOOTER en HTML5 par exemple et de mettre une image de fond à FOOTER. 

<body>
  ....code HTML ....
  <footer>....tecxte du pied de page....</footer>
</body>


A+
0
Réponse 2 / 2
lermite222 Messages postés 8724 Date d'inscription   Statut Contributeur Dernière intervention   1 191
 
Bonjour,
Le plus simple serait de fondre tes 2 images en une avec un programme de dessin.
ou bien avec du PHP
A+
0
NO-SOS Messages postés 381 Date d'inscription   Statut Membre Dernière intervention   209
 
Oui, mais si je fond les deux images en une, ça rend pas forcément ce que je veux...
J'ai trouvé un système :
Je met "image.jpg" en fond, puis je crée 
<div id="background"></div>
en plein milieu des balises 
<body>
, ensuite je gère avec css: 

div#background
{
	position : fixed ;
	right : 0px ;
	top : 0px ;
}
div#background:after
{
	content : url("image2.jpg");
}


du coup avec mon navigateur ça va, ça rend bien, mais quand je réduis la taille de la fenêtre, "image 2.jpg" passe par dessus le reste du contenu web...

Et pour les deux images en 1, il faut que je la tire au plus loin, et ça ne correspond pas bien à la résolution....

Si vous avez toujours des idées...
0

Discussions similaires

"Couleur de page" pour une seule page
lisa -
Lisa -

6 réponses