Un background différent pour chaque page.

Version imprimable

03/01/2010, 11h59
senderia

Un background différent pour chaque page.

Bonjour,

Je viens de réaliser mon tout premier site.
Je possède donc plusieurs pages html.
Je suis en train de créer ma page css.
Le pb est que je cherche à mettre une fond pour chaque page html.
J'ai bien réussi à mettre un fond pour la première page mais comment faire pour les autres?
Dois-je créer plusieurs feuilles de style?

Merci à vous :)
03/01/2010, 13h09
Eclydia
Bonjour senderia,

Tu as 2 solutions, la première est celle ou tu fait une feuille de style principale et une autre particulière à chaque page pour mettre ton background.

Personnellement je n'aime pas trop cette solution parce que créer une feuille de style juste pour un background c'est très moyen :S

Je te conseil doc de ne pas mettre de background dans ton css et de le mettre sur chaqune des pages directement dans ta balise body comme ceci :
Code:

1 2 3 4 5 6 <html> <head> </head> <body style="background:transparent url(../images/bg.png) repeat-x scroll 0 0;"> </body> </html>
Bonne continuation ;)
03/01/2010, 13h32
senderia

bonjour,

Merci pour ta réponse.
C'est à la base ce que j'avais fait.. mais comme je voulais apprendre à utiliser les feuilles de style je me suis dis pourquoi pas tenter.. mais ça ne fonctionne pas :?

Je vais donc devoir utiliser la solution la plus simple.. dommage!!

merci à toi ;)
03/01/2010, 13h49
lautrejojo

Tu peux aussi utiliser un identifiant différent pour dans le body de chacune de tes pages.

Et dans la feuille de style, tu gères le background au cas par cas.
03/01/2010, 14h14
senderia
bonjour,
Je viens de voir ceci sur le net
ça marche pour la 1ère page mais pas pour la seconde. :?

je ne comprends pas là .

voici mon code :
Code:

1 2 3 4 5 /* page css*/ body#accueil{background-image: url("Images/U.jpg");} body#page1{background-image: url("Images/D.jpg");}
et dans mes page html j'ai mis

Code:

<body id="accueil">

et

Code:

<body id="page1">

merci
03/01/2010, 15h52
lautrejojo

Ca peut venir de pas mal de choses. Je te propose de vérifier que :

- L'id n'est pas déjà utilisé dans le html
- L'id n'est pas déjà stylisé différemment dans la css
- Le chemin vers ton image est le bon (majuscules / minuscules ?
- Le chemin vers la .css est le bon ?
- Tu déclarais précédemment tes adresses d'images dans le html : si tu le fais dans la css, peut être que le chemin n'est plus le même ?

Et sinon, mets nous tes codes qu'on puisse y jeter un oeil ;-)

ça fonctionne chez moi

code html :

1/ Tu donnes un id différent à chacun des body des tes différentes pages :

page1 : <body id="accueil">page2 : <body id="accueil2">page3 : <body id="accueil3">2/ Tu n'oublies pas de faire le lien avec la css

Code:

<link rel="stylesheet" type="text/css" href="stylesSheet.css" media="screen"/>

code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*en extra le code pour une image centrée et redimensionable à la taille de la fenêtre ;)*/
 
#accueil{
    margin: 0px;
    padding: 0px;
    background: url(Images/imageaccueil.jpg) no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover;
}
#acceuil2{
    margin: 0px;
    padding: 0px;
    background: url(Images/imageaccueil2.jpg) no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover;
}
#accueil3{
    margin: 0px;
    padding: 0px;
    background: url(Images/imageaccueil3.jpg) no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover;
}

Merci :ccool:

tu peux optimiser ton css de sorte :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/*en extra le code pour une image centrée et redimensionable à la taille de la fenêtre ;)*/
 body {
      margin: 0px;
    padding: 0px;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover;
    background-repeat: no-repeat;  
    background-position: center; 
    background-attachment: fixed
}
#accueil{
     background-image: url(Images/imageaccueil.jpg);
}
#acceuil2{
     background-image: url(Images/imageaccueil2.jpg);
}
#accueil3{
     background-image: url(Images/imageaccueil3.jpg);
}

12/04/2012, 22h43
Devwil

Trop cool !

Effectivement, question optimisation c'est nickel !

Merci Ouldfella ;)