S'abonner :

Newsletters

Magazines

01men.

Avis sur les produits

Avis sur les logiciels

Avis sur les jeux

Actualités

A propos de 01net

801 utilisateurs connectés

Forum de 01net / Développement / Mettre une image simple en fond de page html [RÉSOLU]

Mettre une image simple en fond de page html [RÉSOLU]

Charloun139 le 06 février 2009 à 15h44

Bonjour à toutes et à tous,

Ce que j'ai écrit ci-après fonctionne très bien, mais j'obtiens une mosaïque.
<html>
<head>
<title>Essai_image_fond</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="file:/C:/Users/MoiMeme/Documents/Site/Images/testimage.jpg">
</body>
</html>
Question :
J'aurais souhaité avoir une seule, image en fond, centrée en haut, mais je n'y arrive pas, j'ai essayé background-repeat, mais je ne connais pas la syntaxe exacte. Faut-il vraiment inscrire URL, faut-il vraiment mettre les ( ), faut-il placer des " ou dans ce cas, pas du tout ?... autant de questions que je me pose. (':/')
Est-ce que quelqu'un parmi vous, pourrait avoir l'amabilité de m'écrire la syntaxe exacte de <html> à </html> (comme mon exemple),... ou de me mettre sur la voie,... me renvoyer sur un Tuto ?
Merci et bonne fin de journée.

-->Message édité par Charloun139 le 08/02/2009 14:33:07<--

-------
Charloun139
Il n'y a pas de secret dans les prix !

répondre

hamster3553 le 06 février 2009 à 17h03

salut,
si elle se repete c'est quelle est trop petite, c'est tout.
Pour éviter la repetition, tu a effectivmenet background-repeat:no-repeat; . Ton image sera calé en haut a gacuche mais occupera seulement la taille qu'elle a. Tu pourra l'agrandir avec width et height mais tu perdra en qualité.

J'ajouterais qu'avec ce lien:
background="file:/C:/Users/MoiMeme/Documents/Site/Images/testimage.jpg"
tu auras des problemes quand tu publieras sur le web puisque tu va chercher sur C.

-->Message édité par hamster3553 le 06/02/2009 17:05:23<--

-------
--> www.katagena.info <--
--> www.guillaume-charbonneau.fr <--

répondre

spamophobe le 06 février 2009 à 20h17

J'ajouterais qu'avec ce lien:
background="file:/C:/Users/MoiMeme/Documents/Site/Images/testimage.jpg"
tu auras des problemes quand tu publieras sur le web puisque tu va chercher sur C.

+1 !!

Sinon, tu peux trouver toutes les explications sur le positionnement des images de fond ici :
http://css.mammouthland.net/image_de_fond.php

répondre

Charloun139 le 07 février 2009 à 10h59

hamster3553 a écrit :

Bonjour,
Merci pour ta réponse rapide. Pour le C:/, c'est parce que je fais des essais. Les images "fonctionnelles" sont sur http://... au niveau de notre site.
Pour ce qui est de l'image unique, je sais qu'on peut le faire avec background-repeat ; background-position:50% 50%, etc, (j'ai vu des exemples ici : http://openweb.eu.org/articles/background_css )mais mon problème, est une question de syntaxe... il faut que j'apprenne, voilà tout... j'en ai conscience. Je vais continué à chercher,...
Bonne journée.

-------
Charloun139
Il n'y a pas de secret dans les prix !

répondre

Charloun139 le 07 février 2009 à 11h20

spamophobe a écrit :

+1 !!

Sinon, tu peux trouver toutes les explications sur le positionnement des images de fond ici :
http://css.mammouthland.net/image_de_fond.php

Bonjour,
Je connais effectivement ce site qui est d'ailleurs vraiment très bien, mais pas pour ceux qui font les premiers pas. Je ne suis pas encore arrivé à faire fonctionner la syntaxe suivante :
body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
background-repeat:no-repeat;
}
Je ne sais pas comment et quoi écrire ce qui vient avant et ce qui vient après.
Comme je disais à hamster3553 plus haut, je vais surtout continuer à étudier, je pense que ce sera mieux comme ça... voire même, acheter un petit bouquin pour débutants.
Merci pour ton tuyau... bonne journée.

-------
Charloun139
Il n'y a pas de secret dans les prix !

répondre

spamophobe le 07 février 2009 à 15h14

Je ne sais pas comment et quoi écrire ce qui vient avant et ce qui vient après.

???????
Comment ça ?

Voyons, dans l'extrait de code que tu nous a donné, je vois un appel à une feuille de style s'appelant "style.css"

C'est dans ce fichier style.css qu'il faut déclarer ce qui va s'appliquer au body.
Ce qui vient "avant ou après", ça n'a pas vraiment de sens de dire ça.
En général on commence par déclarer html, puis body mais c'est juste pour une question de rigueur, tu pourrais très bien finir ta feuille de style par cela.

Tu trouves que CSS débutant n'est pas adapté quand on débute... C'est sûr que quand on maîtrise on trouve les tutos très simples, ce qui n'est peut-être (enfin, ce qui n'est visiblement) pas le cas lorsqu'on fait ses premiers pas.
Mais as-tu bien lu dés le début, c'est à dire de la page d'accueil en suivant la chronologie de départ ?

En tout cas, avec les renseignements que tu donnes, ta déclaration CSS à mettre dans ton fichier style.css devrait ressembler à ça (au chemin près) :

body {
color:black;
background-color:white;
background-image:url(Images/testimage.jpg);
background-repeat:no-repeat;
background-position:center top
}

ou, en optimisant :

body {
color:black;
background:white url(Images/testimage.jpg) no-repeat center top;
}

répondre

Charloun139 le 07 février 2009 à 17h28

spamophobe a écrit :

...je vois un appel à une feuille de style s'appelant "style.css"
C'est dans ce fichier style.css qu'il faut déclarer ce qui va s'appliquer au body.
...on commence par déclarer html, puis body... tu pourrais très bien finir ta feuille de style par cela.
Mais as-tu bien lu dés le début, c'est à dire de la page d'accueil en suivant la chronologie de départ ?
En tout cas, avec les renseignements que tu donnes, ta déclaration CSS à mettre dans ton fichier style.css devrait ressembler à ça (au chemin près) :...

Non, effectivement, en toute honnêteté, je n'ai pas lu dès le début en suivant la chronologie de départ !... j'étais (trop) pressé d'afficher mon image en fond.
Je vais suivre ton conseil, aller à nouveau sur le site en question, commencer au début et apprendre !... rien de tel.
Quant au "<... href="style.css"> ", c'est du copier coller et avec ta réponse j'ai compris qu'il fallait créer cette feuille de style à laquelle on faisait référence dans les pages html (c'est ça ?).
Donc, je retourne à l'école, sans brûler les étapes, cette fois-ci

.
Merci pour ton aide... et bonne fin de journée.

-------
Charloun139
Il n'y a pas de secret dans les prix !

répondre

spamophobe le 07 février 2009 à 18h10

j'ai compris qu'il fallait créer cette feuille de style à laquelle on faisait référence dans les pages html (c'est ça ?).

Oui, c'est ça

Bonne fin de journée à toi aussi (et à suivre ?)

répondre

Charloun139 le 12 février 2009 à 14h39

spamophobe a écrit :

Oui, c'est ça

...

Afin de donner un exemple concret au sujet, voici ce que j'ai créé.

Un fichier HTML (image_fond.html, par exemple), réduit au strict minimum (ou presque) :

<html>
<head>
<title>Essai image fond no-repeat</title>
<link rel="stylesheet" type="text/css" href="bg_no-repeat.css">
</head>
<body>
Texte libre à mettre en forme
</body>
</html>

=========================

et un fichier CSS (bg_no-repeat.css), lui-même réduit au strict minimum :

body {
background-image: url(icone_eci.png);
background-repeat: no-repeat;
background-position: center 40;
}
=========================

Remarque : pour cet exemple, le fichier CSS, le fichier HTML et l'image "icone_eci.png" sont tous les trois dans le même répertoire.
Bonne journée à toutes et à tous.

-------
Charloun139
Il n'y a pas de secret dans les prix !

répondre