28173 sujets

CSS et mise en forme, CSS3

[Résolu]Comment utiliser plusieurs images d'arrière plan ?

Salut,

je fais actuellement un site en utilisant les CSS et j'ai un pb au niveau de l'arrière plan, ou la "background-image" si vous préférez.

voici donc la page en question. J'ai donc mis une image de fond ==> celle ci mais je n'es pas envie que cette image de fond se répéte, donc je vais mettre : 

bakground-repeat : no-repeat ;


l'image de fond fait à peut près 715px, donc quand la page web fera plus de 715px je voudrais qu'une nouvelle image de fond prenne le relais, mais comment faire ? je sais qu'avec la propriétée " background-color " une couleur pourrait prendre le relais, mais ce que je souhaite c'est une image qui prenne le relais, pas une couleur.

voila ma feuille de style CSS

j'ai définis mon image de fond ici

.divmain {
border-color: #000000 ;
background-image:url(fontff5.gif) ;
width:747px ;
padding: 5px ;
height:800px ;
margin-left: auto ;
margin-right: auto ;
}


Merci d'avance pour votre aide
@+
Modifié par omer93110 (11 Feb 2006 - 17:09)
Administrateur
omer93110 a écrit :
voila http://127.0.0.1/MonSite/CSS/stylecsstempsssss.css ma feuille de style CSS

la solution "de base" est d'utiliser plusieurs div imbriqués, dont le premier contiendra l'image à répéter au lieu d'une simple couleur de fond, et le second la deuxième image à superposer.

ps : personne ne pourra accéder à ton serveur local et consulter la feuille de style
(127.0.0.1 est l'adresse IP locale de tout PC sur le réseau)
Modifié par dew (11 Feb 2006 - 17:08)
arf, maintenant cette technique fonctionne sous IE et pas sous Firefox :

ici

J'ai rajouter ça dans ma feuille de style :
.divImgFond1{
background-image:url(inii.gif) ;
width:757px ;
margin-left: auto ;
margin-right: auto ;
}

.divImgFond2{
background-image: url(fontff5.gif);
background-repeat: no-repeat ;
width:757px ;
margin-left: auto ;
margin-right: auto ;
height:715px ;
}


et j'ai utilisé ces 2 classes ici :

<body>
<div class="divImgFond1">
<div class="divImgFond2">
<div class="divmain" >...


Si vous avez une idée de l'origine du problème je suis preneur.
merci d'avance
Modifié par omer93110 (11 Feb 2006 - 21:38)
Bah je veux pas être devin mais si ta première image te plait bien et que tu ne veut pas qu'elle se reproduise quand le contenu est plus grand qu'elle fait un scroll ou fixed je sais plus lequel atten je regarde...`
Voila regarde ça : clik here
bon dans mon cas mon image est trop petite mais avec la tienne ça marchera nikel
Modifié par Makushimucool (12 Feb 2006 - 17:31)
En fait ça s'est bon j'ai réussis à faire en sorte que la grosse image ne se répète pas et que ce soit une autre image qui prenne le relais une fois le contenu plus grand que la grosse image, merci quand même Smiley smile .
Mais maintenant j'ai affaire à un problème de navigateur comme je l'ai cité plus haut
a écrit :
maintenant cette technique fonctionne sous IE et pas sous Firefox :


Edith : C'est bon j'ai réussis, mettez l'image qui doit prendre le relais dans un DIV et l'image qui ne se répète pas en tant que background-image .
Modifié par omer93110 (13 Feb 2006 - 23:25)
Sujet clos
Aller à