Rechercher : dans
Par :

Css / aligner 2 images d'arrière-plan

Dernière réponse le 8 nov 2006 à 12:23:40 coventry, le 27 sep 2004 à 17:23:45 
 Signaler ce message aux modérateurs

Bonjour,
Je suis en train d'apprendre l'HTML/CSS.
Je suis arrivé a un problème que je n'arrive pas à résoudre.
Lien vers Screenshot du prolème :
http://img76.exs.cx/my.php?loc=img76ℑ=Erreurcss.jpg

Voici le code de ma page css :

/* CSS Document */

H1
	{
	background-image:url(../Images/BordSup.jpg);
	max-width:750px; /*Pas pris en charge par IE*/
	background-position:top;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FF0000;
	text-align:center;
	background-repeat: no-repeat; /*image ne se répète pas*/
	background-color: white;
	margin-top:5px;
	padding-top:27px;
	padding-bottom:40px;
	}

H2
	{
	background-image:url(../Images/Milieu.jpg);
	background-repeat:repeat-y;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#3333FF;
	text-decoration:underline;
	text-align:center;
	}
	


J'essaie de faire que les 2 images en background (balise H1 et H2) se relie correctement, sans espaces entre ni décalages. Si je supprime ou reduit le padding-bottom de la balise H1, l'image BordSup.jpg ne s'affiche pas entièrement.

Merci de votre aide


Imagination is more important than knowledge.

Meilleures réponses pour « css / aligner 2 images d'arrière plan » dans :
[Word] Image de fond VoirIl est possible sous Microsoft Word d'afficher une image en arrière-plan dans un document en cliquant sur le menu Format, puis sur Arrière-Plan et enfin sur Motifs et textures. Dans l'onglet Image, cliquer sur le bouton "Sélectionner une image"....
Changer de fond d'écran VoirPour Windows XP et versions antérieures Pour Windows Vista Obtenir des fonds d'écran Solution plus rapide Comment changer l'arrière-plan du Bureau ? Un fond d'écran est une image utilisée en arrière-plan de votre bureau. Lors d'une...
Découper un objet de l'arrière plan (détourage) VoirParfois on peut vouloir découper un objet de son arrière-plan, par exemple un visage, un fruit posé sur une table, etc. L'outil habituellement utilisé est le lasso, mais l'opération est délicate. On peut également utiliser des calques, mais dans...
Les arrière-plans VoirInsérer une image en fond Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise  : Attribut Effet Visuel BACKGROUND="image" Affiche l'image en arrière...

1

B@|-|@N, le 27 sep 2004 à 17:27:11

Ton problème vient peut-être de tes marges non ?
Tente de mettre margin-top etc à 0px pour voir ?

Bahan

Close the world.||.txen eht nepO

Répondre à B@|-|@N

2

coventry, le 27 sep 2004 à 17:56:02

Non ca ne change rien...

Avec Mozilla, je n'ai pas le problème de l'alignement, les 2 images sont bien alignées mais il reste tjs un espace entre les 2...

image --> http://img74.exs.cx/img74/5140/Erreurcss.jpg


Imagination is more important than knowledge.

Répondre à coventry

3

coventry, le 27 sep 2004 à 18:22:29

J'ai pu corriger le problème.
Pour l'espacement, j'ai ajouté une "margin-top" negative dans la balise H2.
Pour le decalement, j'ai fait la meme chose avec margin-left. Mais j'ai un autre probleme ^^
Avec Mozilla, il n'y avait pas de decalement avant que je fasse la modification, donc c'etait tout bon. Mais avec IE il y en avait 1. En ajoutant la balise "margin-left", j'ai corrigé le decalement dans IE...mais j'en ai créé un dans mozilla!!!

Comment puis-je aligner les 2 images (qui font toutes 2 800px de largeur) dans IE, sans les desaligner dans Mozilla??? Ou bien pourquoi IE me fait un espacement ou il ne devrait pas y en avoir??
merci

Page CSS modifiée (ecartement dans Mozilla, pas dans IE) :

H1
	{
	background-image:url(../Images/BordSup.jpg);
	max-width:800px; /*Pas pris en charge par IE*/
	background-position:top;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FF0000;
	text-align:center;
	/*height: 60px; */
	background-repeat: no-repeat; /*image ne se répète pas*/
	background-color: white;
	margin-top:5px;
	padding-top:27px;
	padding-bottom:40px;
	}

H2
	{
	background-image:url(../Images/Milieu.jpg);
	background-repeat:repeat-y;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#3333FF;
	text-decoration:underline;
	text-align:center;
	margin-top:-40px;
	margin-left:-10px;
	}





Imagination is more important than knowledge.

Répondre à coventry

4

 Gamin, le 8 nov 2006 à 12:23:40

Salut,
J'ai eu un pb de ce genre.
En fait, il m'a suffit d'ajouter ce bout de code au début de mon CSS :

html { margin: 0px;
padding: 0px;
width: 100%;
overflow: auto;
}

body { margin: 0px;
padding: 0px;
width: 100%;

}

Comme par magie...
A voir si ça marchera pour toi !
A+
Gamin

Répondre à Gamin
Collection CommentÇaMarche.net