Aller au contenu

(CSS) Comment mettre deux images en arrière plan ?

cedricpc

Par cedricpc
dans Programmation et Lignes de code

Messages recommandés

cedricpc Mentor

cedricpc

Posté(e)
Posté(e)

*Bonsoir

Bah que dire de plus que le titre ? :transpi:

Euh...

Ah si !

Voila ce que j'ai tenté (sans succès) :

BODY {
font: normal normal normal 12px/normal Arial, Helvetica, sans-serif;
color: #0099FF;
background: #CCCCCC url(images/backgroundv3_2.jpg) repeat fixed top;
background: #CCCCCC url(images/backgroundv3_1.jpg) repeat-x fixed top;
}

J'ai uniquement l'image "images/backgroundv3_1.jpg" qui s'affiche... Comment faire apparaitre les deux svp ?

Merci par avance :D !

Lien vers le commentaire
Partager sur d’autres sites
cedricpc Mentor

cedricpc

Posté(e)
  • Auteur
Posté(e)

Bon j'ai pas dit pourquoi je voulais faire ca... :chinois:

Enfaite, il devrait y avoir une image devant (répéter en x), l'autre en dessous (répéter en x et y)...

De manière que si la résolution d'écran de la personne qui ouvre la page est plus élever que la taille de l'image (environ 600 pixels de haut), il puisse voir l'autre image en plus (qu'il verra à l'infini comme elle est "repeat"), pensant que ce n'est qu'une seul et même image !

Je sais pas si vous avez vraiment suivi... Si vous voulez je peux vous faire des imprimes écran de ce que je veux vraiment avoir et ce que j'ai pour le moment !

Merci par avance.

Lien vers le commentaire
Partager sur d’autres sites
classe-a Collaborateur

classe-a

Posté(e)
Posté(e)

Bonjour à toutes et à tous,

Je ne me souviens plus exactement, mais je me demande si en faisant comme cela, ca ne fonctionnerait pas???

body {

font: normal normal normal 12px/normal Arial, Helvetica, sans-serif;

color: #0099FF;

background: liste;

Background-image: #CCCC url (images/backgroundv3_1.jpg;

background-repeat: repeat;

}

Peut-être qu' a la dernière ligne, il faudrait préciser si c'est répéter en x ou en y ou alors les deux

background-repeat: repeat-x;

background-repeat: repeat-y;

Je ne suis pas certain du tout mais.... j'aurais essayé de t'aider

A+ :chinois:

Lien vers le commentaire
Partager sur d’autres sites
cedricpc Mentor

cedricpc

Posté(e)
  • Auteur
Posté(e)

Hum...

Merci d'avoir essayer classe-a mais ce n'est pas ce que je veux :francais:

Je sais répéter une image... La preuve...

Voila ce que j'ai tenté (sans succès) :

BODY {
font: normal normal normal 12px/normal Arial, Helvetica, sans-serif;
color: #0099FF;
background: #CCCCCC url(images/backgroundv3_2.jpg) [b]repeat[/b] fixed top;
background: #CCCCCC url(images/backgroundv3_1.jpg) [b]repeat-x[/b] fixed top;
}

Je ne me plante pas dans le repeat ou autre :heben:

Le problème c'est que je voudrais deux images en background...

Merci quand même :mdr:

Lien vers le commentaire
Partager sur d’autres sites
cedricpc Mentor

cedricpc

Posté(e)
  • Auteur
Posté(e)

Je viens d'essayer :

BODY {
font: normal normal normal 12px/normal Arial, Helvetica, sans-serif;
color: #0099FF;
background-color:#CCCCCC;
background-image:url(images/backgroundv3_1.jpg);
background-image:url(images/backgroundv3_2.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top;
}

Lien vers le commentaire
Partager sur d’autres sites
willow75 Débutant

willow75

Posté(e)
Posté(e)

salut

alors je sais pas si cela va t'aider car j'ai pas tout compris a ce que tu voulais faire :craint:

pour mettre plusieurs image en fond je fait des bloc


.bloc1 {
 width: 200px;
 height: 150px;
 background-image:url();
 margin-left: 20px;
 margin-top: 20px;
 etc
etc
 } 

.bloc2 { ....}

Lien vers le commentaire
Partager sur d’autres sites
cedricpc Mentor

cedricpc

Posté(e)
  • Auteur
Posté(e)

Bon j'ai un code qui marche sous tout les autres navigateurs que ie... Voici le bout de code :

(Dans le CSS :)

BODY {
margin: 0px;
padding: 0px;
font: normal normal normal 12px/normal "Arial", Helvetica, sans-serif;
color: #0099FF;
background-color:#CCCCCC;
background-image:url("images2.gif");
background-repeat:repeat;
background-attachment:fixed;
background-position: top left;
}

#bg {
background-image:url("images1.gif");
background-repeat:repeat-x;
background-attachment:fixed;
background-position: top left;
width: 100%;
height: 100%;
}

et dans la page html :

<html>
<head></head>
<body>
<div id="bg">
blablabla<br /><br /><br /><br /><br /><br /><br /><br /><br />
blablabla<br /><br /><br /><br /><br /><br /><br /><br /><br />
blablabla<br /><br /><br /><br /><br /><br /><br /><br /><br />
blablabla<br /><br /><br /><br /><br /><br /><br /><br /><br />
blablabla<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

Par contre sous ie, le deuxieme fond bouge avec le curseur, il faut donc rajouter 

overflow=auto;

dans #bg{ }

La je cherche comment faire pour n'avoir qu'un seul script pour tous les broswer... C'est la galere cette ie !

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...