Double background sous firefox en HTML

**muaddibx** · 26/03/2007, 18h25

Bonjour tout le monde,

Je suis en train de remettre à jour un site web en html. Mon problème est le suivant: j'aurais souhaité intégrer deux fonds d'ecran sur une même page; une image sera calée en haut à gauche, et l'autre en bas à droite.
J'ai essayé de faire ca en CSS et en html, mais je n'y suis pas arrivé. Si quelqu'un pouvait me donner un ptit exemple de code à mettre, ca serait bien sympa de votre part.

De plus, j'ai précisé sur le titre que je bossais sous firefox, mais je tiens aussi à ce que ca fonctionne sur internet exploser (

).

Merci d'avance, et bonne soirée à vous.

EDIT: si jamais vous aviez une autre solution, je pourrais surement m'en accommoder: par exemple, ne faire qu'une seule image background ajustable automatiquement pour remplir le cadre.

**blueice** · 26/03/2007, 18h44

Suffit de faire deux cadres en arrière plan, avec deux images background différentes... :-)

**muaddibx** · 28/03/2007, 09h58

Rebonjour,

Serait-il possible d'avoir un morceau de code, histoire de me faciliter la tache; en effet, je suis encore en ptit newby, et ca m'aiderait pas mal. J'ai bien fait quelques recherches sur le net, mais je ne trouve pas mon bonheur.

Dans tous les cas, merci pour votre aide, et bonne journée à tous.

**blueice** · 28/03/2007, 10h23

Voilà un exemple :
http://www.dimension-internet.com/dev/background/

**muaddibx** · 29/03/2007, 10h44

Superbe, c'est exactement ce qu'il me fallait

Un grand merci à toi pour le temps consacré à mon problème... j'essaierais d'en faire autant sur des sujets qui me parlent plus

**muaddibx** · 02/04/2007, 10h56

Je rencontre à nouveau un petit problème; dans le code suivant, le fond 1 s'affiche, mais en arriere plan par rapport au texte. J'aurais donc souhaité qu'il apparaisse tout le temps, mais je n'y arrive pas.
Si quelqu'un avait la solution, ca serait bien aimable.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Bienvenue</title>
  <style type="text/css">
  BODY {background : transparent url("images/orange.gif") bottom right fixed no-repeat; font-family: "Futura Lt BT", verdana, arial; color:#436088; margin:30px; padding:0; } 
#fond1 { top:0; width:800px; height:0; background:url("images/logo.gif") top right fixed no-repeat; z-index:10; }
  A:LINK {color:navy; text-decoration: none} 
  A:VISITED {color:navy; text-decoration: none} 
  A:ACTIVE {color: navy; text-decoration: none}
  LI   {color: #000050; text-decoration: bold; font-size: 90%}
  </style>
</head>
<body>
<div id="fond1"></div>
 
<center> 
<H1 ALIGN="LEFT"><FONT FACE="Futura Lt BT">Conseil en <BR>risques et assurances</FONT></H1><BR>
<H3 ALIGN="LEFT"><FONT FACE="Univers">Notre métier: <BR> conseiller, médiateur</H3><BR>
<H4 ALIGN="LEFT">- CREA étudie votre activité, analyse vos risques <BR>professionnels et vous conseille pour les réduire <BR><BR>
- CREA établit un projet de couverture d'assurance <BR>et suit les contrats placés <BR><BR>
- CREA organise et entretient la relation avec <BR>les assureurs <BR><BR>
- CREA vous conseille à l'occasion des litiges <BR>et organise des solutions</FONT></H5>
</center>
</body>
</html>

Vous trouverez en fichiers joints:
- le fichier original
- les deux fichiers images.
J'en suis encore encore au stade d'ébauche, mais bon, si on fait un copier coller de ma citation, ca affiche n'importe quoi.

Merci d'avance et bonne journée à vous.

Muad'Dib

**blueice** · 02/04/2007, 11h16

Très nombreuses erreurs dans le code.
Il faut tout reprendre...

Même en corrigeant, il reste encore des choses à voir et optimiser, pas le temps de tout reprendre.

En tout cas le code sans erreur :

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Bienvenue</title>
<style type="text/css">
BODY {background : transparent url(images/orange.gif) bottom right fixed no-repeat; font-family: "Futura Lt BT", verdana, arial; color:#436088; margin:30px; padding:0; } 
#fond1 { top:0; width:800px; height:53px; background:url(images/logo.gif) top right fixed no-repeat; z-index:10; }
A:LINK {color:navy; text-decoration: none} 
A:VISITED {color:navy; text-decoration: none} 
A:ACTIVE {color: navy; text-decoration: none}
LI {color: #000050; text-decoration: bold; font-size: 90%}
</style>
</head>
<body>
<div id="fond1"></div>
 
<center> 
<H1 ALIGN="LEFT"><FONT FACE="Futura Lt BT">Conseil en <BR>risques et assurances</FONT></H1><BR>
<H3 ALIGN="LEFT"><FONT FACE="Univers">Notre métier: <BR> conseiller, médiateur</FONT></H3><BR>
<H4 ALIGN="LEFT">- CREA étudie votre activité, analyse vos risques <BR>professionnels et vous conseille pour les réduire <BR><BR>
- CREA établit un projet de couverture d'assurance <BR>et suit les contrats placés <BR><BR>
- CREA organise et entretient la relation avec <BR>les assureurs <BR><BR>
- CREA vous conseille à l'occasion des litiges <BR>et organise des solutions</H4>
</center>
</body>
</html>

**muaddibx** · 02/04/2007, 11h47

Pas de bonne nouvelle donc :/

Sinon, concernant l'affichage de l'image, tu aurais une idée par hasard?

**blueice** · 02/04/2007, 12h04

Je ne ferais pas plus...

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
body { color:navy; }
#fond1 { 
background-image:url(images/orange.gif);
background-repeat:no-repeat;
width:100px;
height:30px;
position:absolute;
bottom:0;
right:0;
}
 
#fond2 {
background-image:url(images/logo.gif);
background-repeat:no-repeat;
width:100px;
height:53px;
position:absolute;
}
 
#contenu { padding-top:60px; }
 
a { color:navy; text-decoration:none;} 
 
li { line-height:2em; }
/* ]]> */
</style>
</head>
<body>
<div id="fond1"></div>
<div id="fond2"></div>
<div id="contenu">
<h1>Conseil en risques et assurances</h1>
<h2>Notre métier: conseiller, médiateur</h2>
<ul>
<li>- CREA étudie votre activité, analyse vos risques professionnels et vous conseille pour les réduire</li>
<li>- CREA établit un projet de couverture d'assurance et suit les contrats placés</li>
<li>- CREA organise et entretient la relation avec les assureurs</li>
<li>- CREA vous conseille à l'occasion des litiges et organise des solutions</li>
</ul>
</div>
</body>
</html>

Double background sous firefox en HTML

HTML

Discussions similaires

Partager

Partager