Image de fond sur page web [Résolu/Fermé]

Signaler
-
 lepassionner -
bonjour,

j'ai mis une photos en fond de page sur le site que je suis en train de créé
pb : comment faire pour avoir la photos à la taille de ma page.
pour le moment je ne vois qu'une partie de l'image merci

25 réponses

Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 635
Pour simplifier, tu peux utiliser :
<body style="background: url(reunion.jpg) left top fixed no-repeat;">
pour la coller en haut à gauche, fixe et sans répétition.

“comment adapter exactement la taille de mon image à la taille de ma page web”
Je ne comprends pas vraiment la question.
S'il s'agit de faire s'agrandir l'image au fur et à mesure que la page se remplit ou que la fenêtre est redimensionnée, en HTML ce n'est pas possible.
J'ai déjà vu ici quelque chose d'approchant en Javascript. Mais où… ?

“Il serait peut-être préférable que tu adaptes la taille de la page à celle de l'image.” ?
Un peu comme ça.
41
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 86790 internautes nous ont dit merci ce mois-ci

bonjour,

merci pour votre aide, je suis arrivé a peu près à ce que je voulais

mais une dernière question : comment adapter la taille de la page à l'image ?
Messages postés
30
Date d'inscription
mercredi 5 mars 2008
Statut
Membre
Dernière intervention
31 décembre 2008
6
Si tu lisais les messages de 1 à 12,
Tu aurais des réponses à tes questions,
Ululo
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 635
Une technique classique consiste à placer l'image en fond d'un bloc qui définira les dimensions dans lesquelles le reste viendra se placer.

Avec un peu de CSS , ça se fait assez aisément.
Dans ce simple exemple l'image est placée en fond du bloc principal #conteneur.
Les autres blocs (menu, corps…) sont placés en absolute et des dimensions leur ont été attribuées. Ils restent dans le bloc principal.
Pour que le corps ne déborde pas du conteneur, il lui a été ajouté l'attribut “overflow:auto;” et les ascenseurs apparaissent.

Pour que tu voies la différence, le fond de la page est coloré différemment.
Si tu veux qu'il se fonde avec l'image, change la background-color en #ffefce.
salut Gihef,

ta page là, donnée a titre d'exemple est faite avec du CSS si j'ai bien compris...
Es ce que tu as utilisé Dreamweaver pour le faire ? J'aimerai arriver a un résultat comme ça mais pour les CSS je n'y connais rien :/ Merci
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 635 > Tilk*SG1
Salut,

Je ne dispose pas de DW.
Tous les exemples que je donne dans ce forum sont faits “à la main”, avec un éditeur de texte.

En effet, cette mise en page est faite avec CSS.
C'est facile à vérifier.
Affiche le code source et regarde dans la <head>. Tu y trouveras <style type="text/css"> qui indique que ce qui suit en est.
Tu aurrais aussi pu trouver <link rel="stylesheet" href="stylescss.css" type="text/css"></link> qui indiquerait aux navigateurs où trouver la feuille de styles, externe.
Regarde ensuite dans le <body>. Tu y trouveras aussi des style="…" qui indiquent que je m'en suis aussi servi ponctuellement pour les éléments de la page.

Cette structure est assez classique et simple.
Elle ressort de manière assez évidente à la lecture du code :
    #menu {  —>  <div id="menu">
    #corps {  —>  <div id="corps">
L'exemple répond à la question <6> de ce post qui était “comment adapter la taille de la page à l'image ?”
C'est pour ça que j'ai utilisé des positionnements en absolute.
Dans un autre contexte, je m'y serais certainement pris autrement.

+ Pour te lancer :
  cssintro
  https://www.alsacreations.com/
  http://www.pompage.net/
  https://openweb.eu.org/
  http://www.aidenet.com/css/index.htm
  etc.

Et ces exercices :
  http://www.w3.org/Style/Examples/011/firstcss.fr.html
  https://openclassrooms.com/fr/courses
> Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019

Salut Gihef...

Peut-être pourras tu m'aider...
Tu avais conseillé qq'1 un peu dans le même cas q moi.

Alors voilà :
Je souhaiterais créer un fond qui soit fixe ET qui ne se répète pas ET qui soit de la taille d'un écran d'ordi (du moins en hauteur).

J'ai passé toute la soirée à faire un fond sur photoshop (... je suis très longue !), je pensais l'avoir mis à la bonne taille (de l'écran), mais maintenant q'il est sur la page myspace, il fait finalement à peine 1/3 de la page...

Merci d'avance...
A+
Messages postés
183
Date d'inscription
lundi 12 novembre 2007
Statut
Membre
Dernière intervention
1 novembre 2008
23
perso, pour qu'une image s'adapte en permanence à la taille de l'ecran ( resolution ) tt en restant jolie et sans peser trop lourd, je la crée en flash, puis intergre ce flash à la page... mais bon, c'est surtout pratique quand on fait tt son site en flash, sinon, y a parfois des problemes de superposition...

l'astuce consiste a mettre le flash dans un tableau, puis de creer sa page dans ce tableau... mais pas toujours un resultat au top...
Messages postés
183
Date d'inscription
lundi 12 novembre 2007
Statut
Membre
Dernière intervention
1 novembre 2008
23
oups, désolé, ca marche pas... je fais ca seulement quand je cré un site 100% en flash... c'est encore le meilleur moyen pour pouvoir ajusté un site ( et pas seulement le fond) à une resolution d'ecran...
Bonjour,
je viens à vous car je viens de me lancer dans le développement web et que je m'arrache les cheveux sur un problème dont je suis sur vous pourrez m'aider
Voila je suis en train de créer un site, je viens d'y mettre un fond d'écran et j'aurai souhaité rajouté des textes dessus, pourriez vous m'indiquer quel balises utiliser, et quel terme éxact dois je mettre sachant que le nom de ma photo est Dock. merci d'avance
Anthony
Messages postés
30
Date d'inscription
mercredi 5 mars 2008
Statut
Membre
Dernière intervention
31 décembre 2008
6
Beh tu vois Anthony, pas besoin de code :
Tu vas sur ton logiciel de traitement d'images, The Gimp ou Photophiltre par exemple, tu prends l'outil Texte et tu écris ton texte.
Mais de toute façon si ton image est en fond pquoi ne pas écrire ta page html tt simplement ça s'écrira par dessus.
Je te rappelle que le code pour mettre une image de fond en css (au cas où tu serais perdu) est :
body{
background-image: url(lenomdetonimage);
}
Ululo
Messages postés
1
Date d'inscription
jeudi 6 mars 2008
Statut
Membre
Dernière intervention
7 mars 2008

Et bien j'ai compris je te remercie Ululo ça fait plaisir de voir qu'il y a de l'entraide!!! j'ai utilisé également une feuille de style CSS (ce qui éffectivement est tres pratique pour utiliser une page web!!!) mais est-il possible de modifier tout ce qui touche au fichier mp3, jpg, gif, .. sur les feuilles de style CSS et quels en sont leurs codes?
Merci d'avance
eeeeee nan mais j'ai dis une bétise c'est pour ça je m'en suis rendu compte ensuite, y'a aucun soucis c'est cool.
Salut ! Quelqu'un pourrais me dire comment mettre un fond sur mon site parce que vous m'aider pas vraiment comme sa ^^
Bonjour griffon
Et bien je te laisse mon adresse de messagerie electronique ainsi que mes coordonées, tu peux me contacter si jamais tu recherches un developpeur pour créer ton site internet
rozdidin@hotmail.com
tu peux également me contacter au numéro suivant :
06-62-23-91-47
Bonjour à tous dans l'attente d'une réponse de votre part mon problème est le suivant : je viens de créer un second myspace mais pour ce qui est de mon fond j'ai un problème car cette fois si j'ai pris une image de google d'une taille de 1500x2250 que j'ai ensuite héberger sur le site casimages pour récupérer le code donc une fois le code récupérer je les copier en sautant une ligne a la suite de "Qui je suis?" le problème est que pour voir a droite te a gauche de ma photos il faut ce déplacer de droite a gauche vue sa grandeur et mon texte "Qui je suis?" et mes centres d'intérêt tous sa ce justifie de par et d'autre de la photos donc sur les côtés et donc moi j'aimerais avoir mon texte qui passe par dessus l'image en transparent .
Mon code et le suivant :

<a href="https://www.casimages.com/"><img src="http://nsa01.casimages.com/img/2008/04/20/0804200352523012242.jpg" alt="Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit" border="0"/></a>

Merci part avance de votre aide.
Dalida
Messages postés
6764
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
881
salut,

ouvre un fil de discussion pour ton problème.
> Dalida
Messages postés
6764
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

stp a ce que tu pe me éddé coman faire pour metre une image sur google . si tu ve bien voila mon adress. rm-94@hotmail.fr
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 635
Bonjour,

Il faudrait savoir comment tu as fait pour placer l'image.
Montre-nous le code.

Pour qu'elle ait la taille de la page, il faut :
- que tu l'agrandisses avec un logiciel graphique avant de la placer dans la page
  mais son poids risque d'êre très important et son chargement long
- que tu adaptes ses dimensions à celle de la page en modifiant ses dimensions à l'aide des attributs HTML correspondants
  mais alors, elle risque de devenir moche, déformée.

Si ton image représente un motif et que tu veux qu'il se répète, il s'uffit que tu n'indiques pas de dimensions pour l'image dans la page.

Il serait peut-être préférable que tu adaptes la taille de la page à celle de l'image.
bonjour,

merci pour les infos.
en affet j'ai adapter (réduction) la taille de mon image.
c'est mieux
par contre mon image se répète et ca ne m'interesse pas
comment faire ?

voici mon code
<BODY BACKGROUND="reunion.jpg" style="background-attachment:fixed;">

merci encore de votre aide
> fcouest
slt

voila qui devrait ne pu répéter ton image:

background-repeat:no-repeat;
> M@xwell
hello,
merci ...
par contre comment adapter exactement la taille de mon image à la taille de ma page web.
est-ce possible en html... je ne connais que très très peu le code

merci
Merci beaucoup pour ta réponse mais en fait maintenant ce que je recherche c'est comment faire pour que mon fond d écran puissent remplir tout mon écran (1400*900, 19p) si jamais vous avez une solution me contacter via ce forum ou sur mon adresse e mail rozdidin@hotmail.com merci par avance
Anthony
Messages postés
30
Date d'inscription
mercredi 5 mars 2008
Statut
Membre
Dernière intervention
31 décembre 2008
6
Je ne comprends pas ta question.
Pourrais-tu être plus clair stp ?
Ululo
je suis entrain de crée un site et j'ia un pb avec le font car l'image se répète
comment faire?
voici mon code:
<body background=7.jpg">
merci
Messages postés
30
Date d'inscription
mercredi 5 mars 2008
Statut
Membre
Dernière intervention
31 décembre 2008
6
Pour mettre un fond (image) sur son site , il y a le css:
body{
background-image: url(tonimage);
}

Et pour la précédente personne, pour que l'image ne se répète pas, il faut utiliser le css:
{background-repeat: no-repeat}
Messages postés
30
Date d'inscription
mercredi 5 mars 2008
Statut
Membre
Dernière intervention
31 décembre 2008
6
Bien répondu, tu es complètement hors-sujet là.
bjr, je voudrais savoir komen on doit faire pour mettre une foto sur la page google et ecrire kelke chose a la place de google??
SVP aider moi
mercii davance
Dalida
Messages postés
6764
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
881
salut,

commence par .

body {
background-image: url(/couchesoleil.jpg);mettre l adresse de ton image
}
.Style1 {color: #FF0000}
.Style2 {
color: #FFFF00;
font-weight: bold;
}
.Style3 {color: #FFFF00; }
.Style4 {
color: #3333FF;
font-weight: bold;
}
.Style5 {font-size: 14px}
-->
</style></head>

<body>
1 2