Double background sous firefox en HTML

Version imprimable

26/03/2007, 18h25
muaddibx

Double background sous firefox en HTML

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 (:mouarf:).

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.
26/03/2007, 18h44
blueice

Suffit de faire deux cadres en arrière plan, avec deux images background différentes... :-)
28/03/2007, 09h58
muaddibx

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.
28/03/2007, 10h23
blueice

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

;)
29/03/2007, 10h44
muaddibx

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

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

3 pièce(s) jointe(s)

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:

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

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:

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>

02/04/2007, 11h47
muaddibx

Pas de bonne nouvelle donc :/

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

Je ne ferais pas plus...

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