image en arriere plan qui se repéte [Résolu]

mathier · 28/01/2012, 23h26

bonsoir
sur une ligne d'un cadre (j'ai utilisé la balise frameset pour structurer ma page) je veux insérer en arrière plan une photo. c'est la ligne correspondant au header.

j'ai donc télécharger une image en .jpg qui me plaisait mais je n'ai pas fait attention aux dimensions ou autres car je ne m'y connais pas.

j'ai réussi à mettre cette photo en arrière plan avec
<body background="photo.jpg"> mais la photo se répète on la voit 5 fois .

pouvez vous m'expliquer pourquoi ? et m'expliquer dans quelle voie chercher pour comprendre comment insérer "intelligemment" des images en arrière plan

merci

franck31 · 29/01/2012, 15h13

Elle se répète 5 fois car ton body fait 5 fois la taille de ton image. Donc pour ne pas avoir cela, tu mets tout une image à la taille du body ou alors dans ton css tu fait:

Code :

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

1
2
3
4
5
 
body {
margin: 0 auto; /*centrage du body et position haute et basse*/
background: url('lien vers ton image) no-repeat;/*pas de répétition d'image*/
}

mathier · 29/01/2012, 19h15

bonjour
je n'utilise pas du CSS car c'est un exercice imposé (utilisation html avec des cadres , attributs sur balise pour la forme)
donc il faut que je mette mon image à la dimension du body mais je ne vois pas comment faire et d'ailleurs le résultat sera sans doute moche .

je souhaite donc mettre l'image une seule fois à droite par exemple

mais comment ? le no-repeat ne marche pas

merci

michel.di · 29/01/2012, 23h23

ça ne marche pas? comment as-tu ajouté le no-repeat?
dans un css comme te l'a conseillé franck31?

mathier · 30/01/2012, 08h18

bonjour
non ça ne marche pas mais vous n'avez pas relevé un point :
je ne dois pas utiliser de css : on me le demande dans l'exercice.
dans ma formation on voit depuis septembre les balises html et on leur met des attributs pour la forme. On fait des cadres aussi pour structurer la page. donc pas de css , pas de html5 non plus c'est les bases comme ils disent.
ce que je dois rendre doit utiliser les cours qu'on a fait et j'ai pas le choix

d'ailleurs à ce sujet cette formation me déçoit , à l'issue de cette formation qui abordera le php et javascript (les bases aussi) je ne pense pas réussir à trouver un emploi quelconque

pour revenir sur mon code
j'ai donc fait un cadre et dans l'en tête je renvoie à une autre page qui contient simplement (src dans balise frameset)

Code :

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

1
2
3
4
5
<body background="photo.jpg">
    <h1 align="center">
		C'est le titre de la page 
	</h1>
</body>

merci

michel.di · 30/01/2012, 10h13

Et si tu fais ça :

Code :

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

1
2
3
4
5
6
 
<body style="background:url(photo.jpg) no-repeat top right">
    <h1 align="center">
		C'est le titre de la page 
	</h1>
</body>

Bovino · 30/01/2012, 10h44

mathier, ce qu'on te demande de faire est apparemment une horreur et une aberration !
D'ailleurs, j'ai entendu dire que #MorinMcFly a assisté en personne au tout premier cours de ton formateur !

michel.di · 30/01/2012, 10h48

C'est clair qu'il n'apprend pas de bonnes bases...

miss_socrates · 30/01/2012, 16h50

1) Déjà, je ne comprends pas très bien ce que tu veux faire: veux-tu mettre une image à la place de la ligne de séparation entre le header et le body ?
2) Si tu mets une image dans body background, elle sera en fond sur toute la page, donc il est normal qu'elle se répète pour couvrir toute la page. Sinon il suffit de la mettre dans un <p> à l'endroit souhaité et de préciser la hauteur voulue en pixels, par ex.: <img src="http://www.image.gif" alt="image" height= "50px" width="150px" />

mathier · 30/01/2012, 21h46

ok merci a tous j'ai réussi

NoSmoking · 30/01/2012, 22h07

Bonsoir,
toujours intéressant de faire partager la solution.

Pour ton info

Les meilleurs cours et tutoriels (X)HTML

Les meilleurs cours et tutoriels JavaScript
devrait te rendre bien des services

mathier · 30/01/2012, 22h58

bonsoir , j'ai donc utilisé le code de michel.di

Citation:

Envoyé par michel.di

Et si tu fais ça :

Code :

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

1
2
3
4
5
6
 
<body style="background:url(photo.jpg) no-repeat top right">
    <h1 align="center">
		C'est le titre de la page 
	</h1>
</body>

merci pour les liens de tutos

NoSmoking · 30/01/2012, 23h09

Citation:

Envoyé par mathier

je ne dois pas utiliser de css : on me le demande dans l'exercice.

donc ça y est c'est fait

miss_socrates · 31/01/2012, 20h37

Citation:

Envoyé par mathier

je ne dois pas utiliser de css

Je fais remarquer que la solution de michel di. est bien du CSS , qui est en ligne, mais c'est du CSS quand même.
Ceci prouve que c'est la meilleure solution pour faire la mise en page.

Bah, Monsieur Jourdain (le Bourgeois Gentilhomme) faisait bien de la prose sans le savoir !!...

28/01/2012, 23h26	#1
mathier Membre à l'essai Auditeur informatique Inscription : août 2011 Messages : 79 Détails du profil Informations personnelles : Sexe : Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Auditeur informatique Secteur : Enseignement Informations forums : Inscription : août 2011 Messages : 79 Points : 21 Points : 21	image en arriere plan qui se repéte bonsoir sur une ligne d'un cadre (j'ai utilisé la balise frameset pour structurer ma page) je veux insérer en arrière plan une photo. c'est la ligne correspondant au header. j'ai donc télécharger une image en .jpg qui me plaisait mais je n'ai pas fait attention aux dimensions ou autres car je ne m'y connais pas. j'ai réussi à mettre cette photo en arrière plan avec <body background="photo.jpg"> mais la photo se répète on la voit 5 fois . pouvez vous m'expliquer pourquoi ? et m'expliquer dans quelle voie chercher pour comprendre comment insérer "intelligemment" des images en arrière plan merci
	00

29/01/2012, 19h15	#3
mathier Membre à l'essai Auditeur informatique Inscription : août 2011 Messages : 79 Détails du profil Informations personnelles : Sexe : Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Auditeur informatique Secteur : Enseignement Informations forums : Inscription : août 2011 Messages : 79 Points : 21 Points : 21	bonjour je n'utilise pas du CSS car c'est un exercice imposé (utilisation html avec des cadres , attributs sur balise pour la forme) donc il faut que je mette mon image à la dimension du body mais je ne vois pas comment faire et d'ailleurs le résultat sera sans doute moche . je souhaite donc mettre l'image une seule fois à droite par exemple mais comment ? le no-repeat ne marche pas merci
	00

29/01/2012, 23h23	#4
michel.di Rédacteur/Modérateur Michel Dirix Ingénieur de Recherche Inscription : juin 2009 Messages : 663 Détails du profil Informations personnelles : Nom : Michel Dirix Âge : 25 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur de Recherche Secteur : Service public Informations forums : Inscription : juin 2009 Messages : 663 Points : 1 179 Points : 1 179	ça ne marche pas? comment as-tu ajouté le no-repeat? dans un css comme te l'a conseillé franck31? __________________ http://midix.fr/ http://michel-dirix.developpez.com/ http://entre-magiciens.fr/ Software is like sex, it’s better when it’s free.
	00

30/01/2012, 10h44	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	mathier, ce qu'on te demande de faire est apparemment une horreur et une aberration ! D'ailleurs, j'ai entendu dire que #MorinMcFly a assisté en personne au tout premier cours de ton formateur ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

30/01/2012, 10h48	#8
michel.di Rédacteur/Modérateur Michel Dirix Ingénieur de Recherche Inscription : juin 2009 Messages : 663 Détails du profil Informations personnelles : Nom : Michel Dirix Âge : 25 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur de Recherche Secteur : Service public Informations forums : Inscription : juin 2009 Messages : 663 Points : 1 179 Points : 1 179	C'est clair qu'il n'apprend pas de bonnes bases... __________________ http://midix.fr/ http://michel-dirix.developpez.com/ http://entre-magiciens.fr/ Software is like sex, it’s better when it’s free.
	00

30/01/2012, 16h50	#9
miss_socrates Membre habitué Inscription : mai 2011 Messages : 112 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : mai 2011 Messages : 112 Points : 134 Points : 134	Image 1) Déjà, je ne comprends pas très bien ce que tu veux faire: veux-tu mettre une image à la place de la ligne de séparation entre le header et le body ? 2) Si tu mets une image dans body background, elle sera en fond sur toute la page, donc il est normal qu'elle se répète pour couvrir toute la page. Sinon il suffit de la mettre dans un <p> à l'endroit souhaité et de préciser la hauteur voulue en pixels, par ex.: <img src="http://www.image.gif" alt="image" height= "50px" width="150px" />
	00

30/01/2012, 21h46	#10
mathier Membre à l'essai Auditeur informatique Inscription : août 2011 Messages : 79 Détails du profil Informations personnelles : Sexe : Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Auditeur informatique Secteur : Enseignement Informations forums : Inscription : août 2011 Messages : 79 Points : 21 Points : 21	ok merci a tous j'ai réussi
	00

30/01/2012, 22h07	#11
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonsoir, toujours intéressant de faire partager la solution. Pour ton info Les meilleurs cours et tutoriels (X)HTML Les meilleurs cours et tutoriels JavaScript devrait te rendre bien des services
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email