Image de fond trop grande

clo25 · 05/06/2011, 18h18

Bonjour cher amis du forum,

J'ai créé une image de fond via photoshop. Après plusieurs heures (je vous épargne ses détails

), je m’aperçois que cette image est beaucoup trop grande soit 1600px X 900px que j'ai mis en format jpg. J'ai cherché un solution via google et rien ne fonctionne car mes critères personnelles est que je désire que cette image soit fixe, non truqué, aucune répétition et surtout le plus important c'est que je ne désire pas de scroll à droite et ni en bas.

De plus, j'aimerais que cette image soit la même pour toutes les résolution de visiteurs et pour tous les types de navigateurs.

J'ai tellement essayé plusieurs essais mais cela ne donne pas de résultat que je désire. Ce que je trouve sur le google c'est souvent comment ajuster une image petite à un fond d'écran mais mon problème est le contraire... elle est trop grande donc je perds de l'image dans le bas.

voici ce que j'ai inscrit dans mon css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
body
{
 
   width:800px; 
   height:600px; 
   margin: auto;
   margin-top: 20px;  
   margin-bottom: 20px;     
   background-image: url("Images/fond.jpg"); 
   background-repeat: no-repeat;
}

J'ai beaucoup joué avec width et height en %, en px avec auto... Là maintenant je suis sur le point de perdre tout le binaire de mon cerveau

.

Si vous avez une solution, j'apprécierais beaucoup. Je vous remercie à l'avance de votre aide si précieuse.

Clo

ornitho13 · 05/06/2011, 20h06

Salut,

tu as 2 solutions :
- soit tu utilises la propriété CSS3 background-size, permettant de dire à ton image de ton fond de prendre les dimensions de ton body (et ainsi sur un resize de ton body, l'image reste toujours visible)

Code :

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

background-size: 100% 100%;

-soit tu utilises une balise <img/> en lui appliquant un max-width et un max height à 100%

Après le souci sera que l'image sera peut être déformé en hauteur ou en largeur, selon la résolution de l'ecran du visiteur

clo25 · 06/06/2011, 04h12

Salut,

J'utilise css et non css3. Je dois aussi préciser que je suis débutante sur la création d'un site web. J'ai lu beaucoup sur le net afin d,apprendre le XHTML et le CSS.

Lorsque je mets mon fonds dans une balise dans mon HTML, il n'est pas en background d'où la raison que j'ai inscrit mon fond dans mon CSS en background-image.

Je suis convaincue que je ne comprends pas le'explication que tu me transmets. J'ai essayé le max-width = 100% et aussi max-height=100% dans ma balise du HTML, mon image n'apparaît pas au complet mais un "scroll" à droite est là afin que je puisse descendre et voir mon image. Par contre, tout mes autres éléments (genre menu, texte, etc... ) se retrouve en dessous de mon image et non par dessus. J'ai fait plusieurs tests mais le résultat n'est jamais le bon.

merci de ton aide

Clo

ornitho13 · 06/06/2011, 11h37

Il faut que tu utilises

Code :

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

position:absolute

sur ton <img/>

Aurais tu une page de démo ou alors le code html qui va avec histoire de mieux cibler mon aide ?

merci

Hyuunkel · 06/06/2011, 13h31

Hello à tous, je viens apporté ma solution qui fonctionne pour ce problème.

Citation:

Envoyé par ornitho13

Il faut que tu utilises

Code :

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

position:absolute

sur ton <img/>

Exacte mais incomplet.

Citation:

Envoyé par clo25

J'ai beaucoup joué avec width et height en %, en px avec auto... Là maintenant je suis sur le point de perdre tout le binaire de mon cerveau

.

Pour etre franc je ne suis pas sur que tu ai chercher beaucoup... mais bon peu importe je vais quand meme te "macher" le travail, alors tu peux procédé ainsi avec des DIV :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
.fond {
	position: absolute ; 
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} 
-->
<!--[if IE]>
html, body {height:100%; width: 100%; margin:0; padding:0;}
<![endif]-->
</style>
</head>
<body>
<img class="fond" src="Images/fond.jpg" alt="">
<div class="fond">
<div ID="contenu">
blablabla
</div>
</div>
</body>
</html>

Voila Sujet Résolu, Cordialement

clo25 · 07/06/2011, 06h50

Merci beaucoup de votre aide,

Petite précision: j'obtiens toujours le même résultat c'est à dire un scroll à droite et aussi en bas. Un collègue de travail me mentionne c'est dû surement qu'il y a une hauteur de ma barre d'internet ainsi que la barre de tâche en bas de mon écran qui occupent une partie de mon écran ce qui fait que je ne peux voir toute l'image. L'image est, selon lui, identique à la résolution de mon écran mais pas à l'espace visuel que j'ai dans internet. Si je visualisais ma page web en plein écran, il me mentionne que surement il n'y aura plus de scroll.

Donc, je crois que mon problème est beaucoup plus difficile que je le croyais. Je dois changer de stratégie.

Merci de tout votre aide encore.

Clo

12monkeys · 07/06/2011, 10h43

Bonjour

Le code de Hyuunkel est tout à fait fonctionnel.

L'explication de ton collègue me semble quelque peu farfelue !

On peut voir une page en ligne, à défaut poste nous le code HTML et CSS complet de ta page pour voir si rien n'interfère.
Déjà avec ton premier code tu définis une hauteur et largeur à body peut être la source du problème.

05/06/2011, 20h06	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, tu as 2 solutions : - soit tu utilises la propriété CSS3 background-size, permettant de dire à ton image de ton fond de prendre les dimensions de ton body (et ainsi sur un resize de ton body, l'image reste toujours visible) Code : Sélectionner tout - Visualiser dans une fenêtre à part background-size: 100% 100%; -soit tu utilises une balise <img/> en lui appliquant un max-width et un max height à 100% Après le souci sera que l'image sera peut être déformé en hauteur ou en largeur, selon la résolution de l'ecran du visiteur
	00

06/06/2011, 11h37	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Il faut que tu utilises Code : Sélectionner tout - Visualiser dans une fenêtre à part position:absolute sur ton <img/> Aurais tu une page de démo ou alors le code html qui va avec histoire de mieux cibler mon aide ? merci
	00

07/06/2011, 10h43	#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	Bonjour Le code de Hyuunkel est tout à fait fonctionnel. L'explication de ton collègue me semble quelque peu farfelue ! On peut voir une page en ligne, à défaut poste nous le code HTML et CSS complet de ta page pour voir si rien n'interfère. Déjà avec ton premier code tu définis une hauteur et largeur à body peut être la source du problème. __________________ 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...
	00

06/06/2011, 04h12	#3
clo25 Invité de passage Claudine Inscription : juin 2011 Messages : 5 Détails du profil Informations personnelles : Nom : Claudine Localisation : Canada Informations professionnelles : Secteur : Arts - Culture Informations forums : Inscription : juin 2011 Messages : 5 Points : 0 Points : 0	Salut, J'utilise css et non css3. Je dois aussi préciser que je suis débutante sur la création d'un site web. J'ai lu beaucoup sur le net afin d,apprendre le XHTML et le CSS. Lorsque je mets mon fonds dans une balise dans mon HTML, il n'est pas en background d'où la raison que j'ai inscrit mon fond dans mon CSS en background-image. Je suis convaincue que je ne comprends pas le'explication que tu me transmets. J'ai essayé le max-width = 100% et aussi max-height=100% dans ma balise du HTML, mon image n'apparaît pas au complet mais un "scroll" à droite est là afin que je puisse descendre et voir mon image. Par contre, tout mes autres éléments (genre menu, texte, etc... ) se retrouve en dessous de mon image et non par dessus. J'ai fait plusieurs tests mais le résultat n'est jamais le bon. merci de ton aide Clo
	00

07/06/2011, 06h50	#6
clo25 Invité de passage Claudine Inscription : juin 2011 Messages : 5 Détails du profil Informations personnelles : Nom : Claudine Localisation : Canada Informations professionnelles : Secteur : Arts - Culture Informations forums : Inscription : juin 2011 Messages : 5 Points : 0 Points : 0	Merci beaucoup de votre aide, Petite précision: j'obtiens toujours le même résultat c'est à dire un scroll à droite et aussi en bas. Un collègue de travail me mentionne c'est dû surement qu'il y a une hauteur de ma barre d'internet ainsi que la barre de tâche en bas de mon écran qui occupent une partie de mon écran ce qui fait que je ne peux voir toute l'image. L'image est, selon lui, identique à la résolution de mon écran mais pas à l'espace visuel que j'ai dans internet. Si je visualisais ma page web en plein écran, il me mentionne que surement il n'y aura plus de scroll. Donc, je crois que mon problème est beaucoup plus difficile que je le croyais. Je dois changer de stratégie. Merci de tout votre aide encore. Clo
	00

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