Image de fond sur un bloc

**rjl** · 31/01/2009, 01h30

Bonjour,
Malgré recherches et essais, je sèche lamentablement...
Je veux organiser ma feuille en 2 blocs dont la colonne gauche supportera une image de fond différente de l'autre partie. En fait, je n'arrive pas à déclarer une image de fond que ce soit dans une class ou une div.
Et il faut bien que ce soit une image de fond car j'ai des logos et photos à passer par dessus et les pages sont en % pour ajuster aux écrans
Merci si vous pouvez m'aider car ça commence à me retarder !
@bientôt et d'avance merci à vous RJL9131

**12monkeys** · 31/01/2009, 12h16

Bonjour

Sans ton code ce sera difficile de t'aider...

Est tu allé voir du coté de background-position ?

**rjl** · 01/02/2009, 18h17

Bonjour 12monkeys et merci de ta réponse...
A la relecture de me question, je conçois que ce soit impossible de m'éclairer.
J'étais effectivement allé voir la page signalée (suite à mes recherches) sans mieux m'en sortir.
J'ai pris du temps à répondre car j'ai cherché en tout sens. Pour autant j'ai sans doute progressé sans avoir résolu mon problème :
Avec "Kompozer", ma colonne gauche fonctionne avec une colonne en % (14% de largeur écran) et une superposition de 2 couches : le fonds d'écran et sa superposition l'une et l'autre en z-index:
Le même processus ne fonctionne pas par contre pour la 2ème colonne (86% de largeur écran) à droite de la précédente ; l'image background se trouve positionnée bien à droite de l'autre mais ce qui devarit se superposer se trouve rejeté en dessous en pleine largeur écran !
Dans aucun des 2 cas l'attribut background-attachment:fixed; ne fonctionne...
Enfin, avec Komposer, j'ai une marge de 2mm à peu près entre les 2 colonnes et la même marge en haut, par rapport au cadrage de la 1ère colonne !
Ce décalage est visible sur la photo jointe.
Lorsque je passe de Komposer au navigateur, le résultat est identique !
Mais, pire, lorsque je remonte l'ensemble de ces pages chez mon hébergeur, contrairement à ce qui se passe lorsque je vais de Komposer sur le nagigateur, les fons sont perdue (tants celui saumon de la colonne gauche que celui jaune pierre de la colonne pricipale
Je vais essayer de joindre le codes pour les parties concernées :
Appel des pages CSS

Code :

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

1
2
3
4
5
  <meta name="AUTHOR" content="RJL" />
  <link rel="stylesheet" type="text/css"
 href="CSS-AR29.css" />
  <link rel="stylesheet" type="text/css"
 href="CSS-AR29C.css" />

Contenu des parties intéressantes de la CSS intéressée "CSS-AR29.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.colgch 
	{
	position: absolute;
	left: 0; 
	top:0;
	width:14%;
	background-image:url(images29/FondMenu29.jpg);
	height: 768px;
	background-attachment:fixed;
	z-index: 3;
	}
.colgchbis
	{
	position: absolute;
	left: 0; 
	top:0;
	float:left; 
	width:14%; 
	margin:auto;
	z-index: 4;
	}
.centrage
	{
	text-align: center ;
	}
.logo
	{
	position:top center;
	margin-left:auto;
	margin-right:auto;
	text-align: center ;
	width:100%;
	height:100%;
	}
.colreg0
	{
	position:relative;
	top:0px; left:14%;
	width:86%;
	background-image:url(images29/FondCorpswww29.jpg);
	height: 770px;
	background-attachment:fixed;	
	z-index: 5;
	}
.colreg 
	{
	top: 0;
	left: 15;
	float:left;
	width:84%; 
	margin:auto;
	z-index: 6;
	}

Appel du code principal :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
</head>
<body>
<div class="colgch"></div>
<div class="colgchbis">
<img src="Images29/LogoAR.gif" alt="Logo Aînés Ruraux"
 class="logo" /><!-- Fin img -->
<div class="centrage">
<div class="menu">Menu
<!-- Fin Menu --></div>
<div class="menucorps">
<ul class="navigation">
  <li><a href="#" title="Vous y êtes"><span><b>Accueil</b></span></a></li>
  <li><a href="Page29/AR22-Objectifs.html"
 title="Axes d'action, Formation, Représentations, Solidarité">Qui
sommes nous ?</a></li>
  <li><a href="Page29/AR22-Organisation.html"
 title="Conseil d'administration, Commissions, Secteurs et cantons">Objectif</a></li>
  <li><a href="Page29/AR22-Actualite.html"
 title="Actions/opérations en cours ou imminentes">Rôle</a></li>
  <li><a href="Page29/AR22-Activites.html"
 title="Planning">Organisation<br />
    </a></li>
  <li><a href="Page29/AR22-Activites.html"
 title="Planning">Activités</a></li>
  <li><a href="Page29/AR22-Partenaires.html"
 title="Liens vers leurs sites">Partenaires</a></li>
  <li><a href="Page29/AR22-PlanSite.html"
 title="Accès directs entre pages">Plan du
Site</a></li>
  <li><a href="mailto:postmaster@ainesruraux22.org"
 title="Nous adresser un mail">Nous
contacter</a></li>
<!-- Fin class Navigation -->
</ul>
<!-- Fin class MenuCorps --></div>
<p><small>Mis à jour le 01/02/2009</small></p>
<p>Site optimisé en 768x1024</p>
<p> &nbsp; </p>
<!-- Fin centrage --></div>
<!-- Fin colgchbis --></div>
<div class="colreg0"></div>
<div class="colreg">
<h1 align="center"><font color="RED"><i>
<marquee border="1">BIENVENUE SUR LE SITE DES AINES RURAUX</marquee>
</i></font></h1>

**desert** · 01/02/2009, 20h16

Rajoutes ceci dans ta feuille de style, ta marge blanche vient peut-être de là.

Code css :

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

1
2
3
body {
     margin: 0;
}

**rjl** · 01/02/2009, 23h08

Re,
Bon, je n'ai pas réussi que ce soit avec des padding: 0; des margin: 0; les deux et même aussi négatifs de 2 ou 3 px ! J'ai aussi ajouté une marge qui ne faisait que confirmer mon alignement incorrect.
Bref, pas la peine d'ennuyer tout le monde : j'ai modifié ma solution.
Mon image qui était le fond de ma colonne de 84% est devenue le fond général dans le body ; le fonds qui fonctionnait parfaitement en colonne gauche est resté : ainsi tout baigne... jusqu'au prochain problème

Merci à vous et @+ RJL9201

Image de fond sur un bloc

CSS

Discussions similaires

Partager

Partager