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

fcouest - Dernière réponse le 11 juin 2010 à 04:48

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

Image de fond sur page web »

Suggestions

Image de fond sur page web
Word - Image de fond » Fiches pratiques
Fond de page sous Open Office Writter » Fiches pratiques
Arrêter les images animées dans les pages Web » Fiches pratiques
Faire un diaporama ou defilement photo ! (Résolu) » Forum
Ruban d'images défilantes - Site web (Résolu) » Forum

Plus

Réponse

+30

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 7 mai 2007 à 17:53

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.

fcouest - 11 mai 2007 à 11:51

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 ?

Réponse

+10

Ululo 31Messages postés 5 mars 2008Date d'inscription 7 mars 2008 à 15:04

Si tu lisais les messages de 1 à 12,
Tu aurais des réponses à tes questions,
Ululo

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 12 mai 2007 à 00:14

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.

Tilk*SG1 - 7 juin 2007 à 16:43

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- 7 juin 2007 à 19:27

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
  http://www.alsacreations.com/
  http://pompage.net/
  http://openweb.eu.org/
  http://www.aidenet.com/css/index.htm
  etc.

Et ces exercices :
  http://www.w3.org/Style/Examples/011/firstcss.fr.html
  http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html

etelfa - 4 août 2007 à 02:06

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+

Réponse

baba_cool 183Messages postés 12 novembre 2007Date d'inscription 13 nov. 2007 à 21:59

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...

Site web

Réponse

baba_cool 183Messages postés 12 novembre 2007Date d'inscription 13 nov. 2007 à 22:30

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...

Site web

Réponse

Anthony 5 mars 2008 à 15:01

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

Réponse

Ululo 31Messages postés 5 mars 2008Date d'inscription 6 mars 2008 à 18:48

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

Réponse

anthony 6 mars 2008 à 19:33

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

Réponse

Ululo 31Messages postés 5 mars 2008Date d'inscription 6 déc. 2008 à 18:42

Bien répondu, tu es complètement hors-sujet là.

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 4 mai 2007 à 18:41

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.

fcouest - 7 mai 2007 à 11:29

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

M@xwell - 7 mai 2007 à 11:41

slt

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

background-repeat:no-repeat;

fcouest - 7 mai 2007 à 11:51

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

Réponse

Anthon'78470 1Messages postés 6 mars 2008Date d'inscription 7 mars 2008 à 15:54

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

Réponse

Ululo 31Messages postés 5 mars 2008Date d'inscription 8 mars 2008 à 17:07

Je ne comprends pas ta question.
Pourrais-tu être plus clair stp ?
Ululo

Réponse

anthon 9 mars 2008 à 23:33

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.

Réponse

diana 23 mars 2008 à 23:37

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

Réponse

Griffon974 24 mars 2008 à 08:18

Salut ! Quelqu'un pourrais me dire comment mettre un fond sur mon site parce que vous m'aider pas vraiment comme sa ^^

Réponse

Ululo 31Messages postés 5 mars 2008Date d'inscription 13 avril 2008 à 11:41

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}

Réponse

Anthony 16 avril 2008 à 11:20

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

Réponse

Lebocoeur 20 avril 2008 à 23:55

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="http://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- 21 avril 2008 à 00:12

salut,

ouvre un fil de discussion pour ton problème.

pilier - 26 oct. 2008 à 17:53

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

Réponse

lepassionner 11 juin 2010 à 04:35

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>

Réponse

kika 10 juil. 2008 à 00:29

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- 10 juil. 2008 à 17:09

salut,

commence par là.

1 2

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

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

Image de fond sur page web »

Passage au tout numérique : quel coût pour les particuliers ?