image de fond sur page webRésolu/Fermé

Question

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

Gihef · Accepted Answer

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.

Gihef · Answer

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.

Gihef · Answer

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.

baba_cool · Answer

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

baba_cool · Answer

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

Anthony · Answer

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

Ululo · Answer

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

anthony · Answer

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

Ululo · Answer

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

Anthon'78470 · Answer

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

Ululo · Answer

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

anthon · Answer

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.

diana · Answer

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

Griffon974 · Answer

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

Ululo · Answer

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}

Griffon974 · Answer

Bonjour, je cherche quelqu'un qui peut m'aider pour créer mon site ?
Le site s'appellera Omega ! C'est un site pour les débutants en Informatique et Internet !
ça parle des jeux en lignes et pleins d'autres choses !!!

Alors qui veut m'aider ?

Anthony · Answer

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

Lebocoeur · Answer

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.

Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit

Merci part avance de votre aide.

kika · Answer

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

1000 · Answer

il faut que tu fait <body backgrounde="la place de votre image">

Ululo · Answer

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

((********MIMI*********)) · Answer

slt tt le monde tu prend tt simplement des mesures de préférence en pixel mais pour encore faciliter les choses et si tu utilise un logiciel comme photoshop quand tu ouvre un nouveau document insert les taille de ta page exactement c tout mé précise encore avec quel logiciel tu travail (coté conseption web et graphisme

aleX · Answer

comment maitre un fond de couleur sur une de ses page de son site merci davence

lepassionner · Answer

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>

lepassionner · Answer

desoler manque un bout TECHNO-SPORTS enlève ce que tu na pas besoin comme les head en haut et en bas

Image de fond sur page web

25 réponses

Discussions similaires

Newsletters