Un background différent pour chaque page.

**senderia** · 03/01/2010, 11h59

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

**Eclydia** · 03/01/2010, 13h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**senderia** · 03/01/2010, 13h32

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

**lautrejojo** · 03/01/2010, 13h49

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.

**senderia** · 03/01/2010, 14h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="accueil">

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="page1">

merci

**lautrejojo** · 03/01/2010, 15h52

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

**Devwil** · 12/04/2012, 00h48

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ouldfella** · 12/04/2012, 16h38

tu peux optimiser ton css de sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

**Devwil** · 12/04/2012, 22h43

Effectivement, question optimisation c'est nickel !

Merci Ouldfella

Un background différent pour chaque page.

CSS

Discussions similaires

Partager

Partager