Position d'une image dans le body

vincent311 · 08/06/2011, 10h53

Bonjour,

Je suis nouveau dans le développement HTML et je sollicite votre aide car je suis bloqué à cause du positionnement d'une image background.

Code :

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

<body style="background-image:url(http://www.monimage.png);background-repeat: no-repeat;background-position : 100px; 70px ;">

Le positionnement est parfait sur mon écran mais quand je change d'écran, de poste (j'imagine que la résolution est la cause du problème) l'image de fond se superpose au texte et n'est pas positionné au même endroit. Comment faire pour que quelques soit l'écran l'image soit au bonne endroit?

Un grand merci d'avance

12monkeys · 08/06/2011, 11h48

Bonjour

Déjà je constate qu'il y a une petite erreur dans tes valeurs de background-position : il y a un ; qui traine.

Pour le positionnement j'ai du mal à me faire une idée avec tes seules explications, on peut voir une page en ligne pour comprendre mieux ?

vincent311 · 08/06/2011, 11h59

Citation:

Envoyé par 12monkeys

Bonjour

Pour le positionnement j'ai du mal à me faire une idée avec tes seules explications, on peut voir une page en ligne pour comprendre mieux ?

En fait, je souhaite mettre l'image sur ma page d'accueil en fond d'un bloc de texte (dans un widget). La position de l'image change selon l'écran que j'utilise.
Sur mon poste sa se positionne bien là ou je veux ; mais quand je change de poste, la résolution de l'écran change donc ma page change de dimension pour s'adapter à l'écran mais mon image de fond reste au même endroit.

Je ne sais pas trop comment être plus clair...

12monkeys · 08/06/2011, 12h11

Citation:

Envoyé par vincent311

Je ne sais pas trop comment être plus clair...

Montrer une page en ligne

Tu as mis ton arrière plan sur le body. Mais ton texte il est dans quoi ? un div, un paragraphe ? Et il est positionnée où, comment...

Bref là tu n'as pas mis ton code HTML pour la page entière, ni le code CSS, en particulier celui relatif au texte...

Donc je me répète : montre nous une page en ligne. Au moins une capture d'écran avec le code HTML et CSS...

Bisûnûrs · 08/06/2011, 12h13

Sans parler de :

Citation:

Envoyé par 12monkeys

je constate qu'il y a une petite erreur dans tes valeurs de background-position : il y a un ; qui traine

vincent311 · 08/06/2011, 12h21

Citation:

Envoyé par 12monkeys

Montrer une page en ligne

Tu as mis ton arrière plan sur le body. Mais ton texte il est dans quoi ? un div, un paragraphe ? Et il est positionnée où, comment...

Bref là tu n'as pas mis ton code HTML pour la page entière, ni le code CSS, en particulier celui relatif au texte...

Donc je me répète : montre nous une page en ligne. Au moins une capture d'écran avec le code HTML et CSS...

Voila la page en question : http://www.techform.net/

Je voudrais mettre une image de fond sous le texte "actualités"

12monkeys · 08/06/2011, 12h52

Voilà c'est plus clair comme ça.

Au lieu de placer ton image d'arrière plan sur le body, places le plutôt l'élément englobant ton widget. Par exemple sur <div class="textwidget"> si tu parles bien de "Autres actualités".

Ce comportement est normal : tu places une image sur le <body> de ta page, celle ci étant centrée, du fait de ce centrage la position de ton contenu varie en fonction des résolutions d'écran.

vincent311 · 08/06/2011, 12h55

Je place l'image dans le body du widget mais l'image déborde du widget.
Je peut pas insérer une propriété pour que l'image s'adapte à la résolution de l'écran?

12monkeys · 08/06/2011, 13h15

Je parle de l'élément body, il ne doit y en avoir qu'un dans ta page (ce qui est le cas à priori) donc le "body du widget" c'est quoi pour toi ?
De plus avec ton premier exemple tu plaçait ton image sur <body> or ceci est le corps de la page et non du "widget" !

En plus je ne vois pas du tout pourquoi tu veux adapter l'image en fonction de la résolution de l'écran : ta page à une largeur fixe de 960pixels, donc ton image doit toujours avoir la même taille quelque soit la résolution de l'écran, vu que ta page ne s’élargit pas...

Enfin si tu le demandes

sache qu'adapter la largeur d'un arrière plan est possible mais seulement avec CSS 3 :http://designshack.developpez.com/tu...ere-plans/#LII. Donc ne fonctionnera pas avec bon nombre d'anciens navigateurs...

En plus on a eu plusieurs discussions ces derniers jours sur des images qui ne s'affichaient pas bien parce que redimensionnées à l'aide de CSS : http://www.developpez.net/forums/d10...images-moches/ ou http://www.developpez.net/forums/d10...ualite-dimage/

vincent311 · 08/06/2011, 13h24

Citation:

Envoyé par 12monkeys

Je parle de l'élément body, il ne doit y en avoir qu'un dans ta page (ce qui est le cas à priori) donc le "body du widget" c'est quoi pour toi ?
De plus avec ton premier exemple tu plaçait ton image sur <body> or ceci est le corps de la page et non du "widget" !

En plus je ne vois pas du tout pourquoi tu veux adapter l'image en fonction de la résolution de l'écran : ta page à une largeur fixe de 960pixels, donc ton image doit toujours avoir la même taille quelque soit la résolution de l'écran, vu que ta page ne s’élargit pas...

Pourquoi l'image ne s'affiche pas toujours au même endroit par rapport au widget de gauche alors?

Je suis incapable de toucher à la page principale, je modifie uniquement les textes à l'intérieur du Widget

Voila le code à l'intérieur du Widget :

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
<body style="background-image:url(http://www.techform.net/wp-content/uploads/2011/06/actu-fond2.png);background-repeat: no-repeat;background-position: 10% 48%;">
 
<br>
<img src="http://www.techform.net/wp-content/uploads/2011/06/Batimat.png" alt="" />
<img src="http://www.techform.net/wp-content/uploads/2011/06/stand.png" alt="" />
<br>
 
<h3 style="color: rgb(99, 159, 214);"><span
style="font-family: Verdana;">Autres actualités</span></h3>
<ul>
	<li><a href="http://www.techform.net/techform-a-200-kmh-au-club-utilisateurs-cegid">Techform à 200 km/h* au Club Utilisateurs CEGID</a></li>
	<li><a href="http://www.techform.net/techform-etait-present-a-la-12eme-edition-du-salon-equipbaie">3LI et Techform affichent leur alliance ERP Dynamics Nav &amp; SmartConfigurator au Salon Equip'Baie 2010</a></li>
	<li><a href="http://www.techform.net/salon-midest-2010-techform-partenaire-cegid-au-forum-industrie">Salon Midest 2010,  Techform partenaire Cegid au Forum Industrie</a></li>
	<li><a href="http://www.techform.net/techform-fete-ses-10-ans-en-2010">Techform fête ses 10 ans en 2010!</a></li>
</ul>

Avec ce code sa s'affiche parfaitement sur mon écran. Mais sur d'autre ordi l'image apparaît décalé.

12monkeys · 08/06/2011, 14h04

Tu teste en local ?

Parce que moi sur le lien que tu m'indiques, je ne vois pas ton image et surtout, je ne vois pas la balise <body> que tu intègres dans le "widget". Quand tu regarde la source tu vois ce second <body> ? Ce qui au passage serait de toute façon mauvais car il ne faut qu'un body par page.

Ce serait plus une chose à intégrer à la page principale et non dans le widget.

vincent311 · 08/06/2011, 14h11

La balise body c'est le <body style=>

Mais vu que ma page a une dimension fixe on peut pas bloquer la position de l'image ?

Bisûnûrs · 08/06/2011, 14h18

Prends bien en compte ce passage :

Citation:

Envoyé par 12monkeys

Ce qui au passage serait de toute façon mauvais car il ne faut qu'un body par page.

Alors supprime les body dans le widget, puisque c'est une grosse erreur de structure HTML.

vincent311 · 08/06/2011, 14h23

J'enlève <body style=> ?

Elle n'est pas obligatoire pour pouvoir mettre le background et les propriété no repeat, position...?

Bisûnûrs · 08/06/2011, 14h29

Image de fond ne veut pas dire élément body obligatoire, non, tu peux mettre une image de fond sur n'importe quel élément HTML, comme un div, un lien, un bouton, etc.

vincent311 · 08/06/2011, 14h32

Citation:

Envoyé par Bisûnûrs

Image de fond ne veut pas dire élément body obligatoire, non, tu peux mettre une image de fond sur n'importe quel élément HTML, comme un div, un lien, un bouton, etc.

Comment je fais pour introduire toute mes propriétés relatives au backgroud alors ? (je met quelles balises?)

Bisûnûrs · 08/06/2011, 14h48

Exactement de la même manière .. Sauf qu'au lieu de mettre body, tu le mets dans ton div textwidget.

vincent311 · 08/06/2011, 16h45

Citation:

Envoyé par Bisûnûrs

Exactement de la même manière .. Sauf qu'au lieu de mettre body, tu le mets dans ton div textwidget.

Si je met pas le body style, sa ne fonctionne pas...

Donc vous ne savez pas comment je peut faire pour que sa apparaisse toujours au même endroit sachantn que ma page est de dimension fixe?

Bisûnûrs · 08/06/2011, 16h47

On ne le répètera jamais assez : "Ca ne fonctionne pas" ne veut rien dire ! Qui plus est lorsque l'on n'a pas même le code de ce que tu as essayé.

Qu'as-tu fait ? Quel est le résultat obtenu ? Quel est le résultat attendu ? Mets à jour aussi ta version en ligne qu'on puisse voir exactement ce qui va pas et pourquoi.

Si tu veux de l'aide, donne nous matière à t'aider, juste avec des "ça fonctionne pas" on n'ira pas loin.

vincent311 · 08/06/2011, 16h55

Citation:

Envoyé par Bisûnûrs

On ne le répètera jamais assez : "Ca ne fonctionne pas" ne veut rien dire ! Qui plus est lorsque l'on n'a pas même le code de ce que tu as essayé.

Qu'as-tu fait ? Quel est le résultat obtenu ? Quel est le résultat attendu ? Mets à jour aussi ta version en ligne qu'on puisse voir exactement ce qui va pas et pourquoi.

Si tu veux de l'aide, donne nous matière à t'aider, juste avec des "ça fonctionne pas" on n'ira pas loin.

J'ai mis sa :

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
 
<"background-image:url(http://www.techform.net/wp-content/uploads/2011/06/actu-fond2.png);background-repeat: no-repeat;background-position: 10% 48%;">
 
<br>
<img src="http://www.techform.net/wp-content/uploads/2011/06/Batimat.png" alt="" />
<img src="http://www.techform.net/wp-content/uploads/2011/06/stand.png" alt="" />
<br>
 
<h3 style="color: rgb(99, 159, 214);"><span
style="font-family: Verdana;">Autres actualités</span></h3>
<ul>
	<li><a href="http://www.techform.net/techform-a-200-kmh-au-club-utilisateurs-cegid">Techform à 200 km/h* au Club Utilisateurs CEGID</a></li>
	<li><a href="http://www.techform.net/techform-etait-present-a-la-12eme-edition-du-salon-equipbaie">3LI et Techform affichent leur alliance ERP Dynamics Nav &amp; SmartConfigurator au Salon Equip'Baie 2010</a></li>
	<li><a href="http://www.techform.net/salon-midest-2010-techform-partenaire-cegid-au-forum-industrie">Salon Midest 2010,  Techform partenaire Cegid au Forum Industrie</a></li>
	<li><a href="http://www.techform.net/techform-fete-ses-10-ans-en-2010">Techform fête ses 10 ans en 2010!</a></li>
</ul>

Cela m'affiche le code

<"background-image:url(http://www.techform.net/wp-content/u...ground-repeat: no-repeat;background-position: 10% 48%;">

puis mon texte

08/06/2011, 10h53	#1
vincent311 Invité de passage Webmarketer Inscription : juin 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmarketer Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2011 Messages : 19 Points : 1 Points : 1	Position d'une image dans le body Bonjour, Je suis nouveau dans le développement HTML et je sollicite votre aide car je suis bloqué à cause du positionnement d'une image background. Code : Sélectionner tout - Visualiser dans une fenêtre à part <body style="background-image:url(http://www.monimage.png);background-repeat: no-repeat;background-position : 100px; 70px ;"> Le positionnement est parfait sur mon écran mais quand je change d'écran, de poste (j'imagine que la résolution est la cause du problème) l'image de fond se superpose au texte et n'est pas positionné au même endroit. Comment faire pour que quelques soit l'écran l'image soit au bonne endroit? Un grand merci d'avance
	00

08/06/2011, 11h48	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Déjà je constate qu'il y a une petite erreur dans tes valeurs de background-position : il y a un ; qui traine. Pour le positionnement j'ai du mal à me faire une idée avec tes seules explications, on peut voir une page en ligne pour comprendre mieux ? __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

08/06/2011, 12h52	#7
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Voilà c'est plus clair comme ça. Au lieu de placer ton image d'arrière plan sur le body, places le plutôt l'élément englobant ton widget. Par exemple sur <div class="textwidget"> si tu parles bien de "Autres actualités". Ce comportement est normal : tu places une image sur le <body> de ta page, celle ci étant centrée, du fait de ce centrage la position de ton contenu varie en fonction des résolutions d'écran. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

08/06/2011, 13h15	#9
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Je parle de l'élément body, il ne doit y en avoir qu'un dans ta page (ce qui est le cas à priori) donc le "body du widget" c'est quoi pour toi ? De plus avec ton premier exemple tu plaçait ton image sur <body> or ceci est le corps de la page et non du "widget" ! En plus je ne vois pas du tout pourquoi tu veux adapter l'image en fonction de la résolution de l'écran : ta page à une largeur fixe de 960pixels, donc ton image doit toujours avoir la même taille quelque soit la résolution de l'écran, vu que ta page ne s’élargit pas... Enfin si tu le demandes sache qu'adapter la largeur d'un arrière plan est possible mais seulement avec CSS 3 :http://designshack.developpez.com/tu...ere-plans/#LII. Donc ne fonctionnera pas avec bon nombre d'anciens navigateurs... En plus on a eu plusieurs discussions ces derniers jours sur des images qui ne s'affichaient pas bien parce que redimensionnées à l'aide de CSS : http://www.developpez.net/forums/d10...images-moches/ ou http://www.developpez.net/forums/d10...ualite-dimage/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

08/06/2011, 14h04	#11
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Tu teste en local ? Parce que moi sur le lien que tu m'indiques, je ne vois pas ton image et surtout, je ne vois pas la balise <body> que tu intègres dans le "widget". Quand tu regarde la source tu vois ce second <body> ? Ce qui au passage serait de toute façon mauvais car il ne faut qu'un body par page. Ce serait plus une chose à intégrer à la page principale et non dans le widget. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	20

08/06/2011, 12h55	#8
vincent311 Invité de passage Webmarketer Inscription : juin 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmarketer Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2011 Messages : 19 Points : 1 Points : 1	Je place l'image dans le body du widget mais l'image déborde du widget. Je peut pas insérer une propriété pour que l'image s'adapte à la résolution de l'écran?
	00

08/06/2011, 14h11	#12
vincent311 Invité de passage Webmarketer Inscription : juin 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmarketer Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2011 Messages : 19 Points : 1 Points : 1	La balise body c'est le <body style=> Mais vu que ma page a une dimension fixe on peut pas bloquer la position de l'image ?
	00

08/06/2011, 14h23	#14
vincent311 Invité de passage Webmarketer Inscription : juin 2011 Messages : 19 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmarketer Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2011 Messages : 19 Points : 1 Points : 1	J'enlève <body style=> ? Elle n'est pas obligatoire pour pouvoir mettre le background et les propriété no repeat, position...?
	00

08/06/2011, 14h29	#15
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Image de fond ne veut pas dire élément body obligatoire, non, tu peux mettre une image de fond sur n'importe quel élément HTML, comme un div, un lien, un bouton, etc.
	00

08/06/2011, 14h48	#17
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Exactement de la même manière .. Sauf qu'au lieu de mettre body, tu le mets dans ton div textwidget.
	00

08/06/2011, 16h47	#19
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	On ne le répètera jamais assez : "Ca ne fonctionne pas" ne veut rien dire ! Qui plus est lorsque l'on n'a pas même le code de ce que tu as essayé. Qu'as-tu fait ? Quel est le résultat obtenu ? Quel est le résultat attendu ? Mets à jour aussi ta version en ligne qu'on puisse voir exactement ce qui va pas et pourquoi. Si tu veux de l'aide, donne nous matière à t'aider, juste avec des "ça fonctionne pas" on n'ira pas loin.
	00

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