Se connecter / S'enregistrer
Votre question

Dimensions arrière-plan d'une page internet

Tags :
  • Sites Internet
  • Programmation
Dernière réponse : dans Programmation
12 Juin 2008 16:03:23

Bonjour,
Je suis actuellement en train de créer un site internet. J'ai donc fait une image à l'aide de Photoshop, que j'ai programmée pour être l'arrière-plan de ma page (grâce à Front Page). Quand je suis sur mon ordinateur, mon arrière plan est entier.
Or, après avoir regardé cette même page sur un ordinateur de mon entreprise, il y a un problème : l'arrière plan est entier, certes, mais on voit un bout de l'image sur la droite qui recommence, et idem en bas de la page.
Après de nombreux essais, j'ai pu remarquer que cela était dû à la résolution de l'écran (qui chez moi était de 1024 x 768), ainsi qu'à la taille du texte de la page internet (moyenne). Or, sur l'ordinateur de mon entreprise, la résolution était de 1280 x 1024, et la taille du texte était la plus grande.
Après quelques changements j'ai pu résoudre le problème sur l'ordinateur de mon entreprise. Mais ce site a pour but d'être vu par des clients et d'autres personnes, et j'aimerais que si leur résolution d'écran n'est pas de 1024 x 768, ils puissent quand même voir l'arrière-plan juste en entier, et non avec des rajouts. Par exemple, quand on va sur des sites commerçants, et professionnels, tel que amazon, la fnac, ou autres, sur le site, la taille de l'arrière-plan et du texte s'adapte automatiquement. Comment faire ??

Je suis désolé mon post est très long :( 
Merci à tous ceux qui sont arrivés au bout, et merci d'avance pour votre aide !

Autres pages sur : dimensions arriere plan page internet

12 Juin 2008 16:19:15

Moi ce qui m'embête le plus, c'est que tu essayes de faire un site professionnel à partir de Frontpage qui pour moi n'est pas du tout adapté à la réalisation de site pro... Surtout qu'au vu de ton post, tu ne t'y connais pas beaucoup en réalisation de site.

Ton problème peut être en partie résolu en spécifiant la valeur background-repeat à "no". Après il faudrait fixer toutes tes valeurs afin que le changement de résolution ne change pas tout le positionnement de ta page.
13 Juin 2008 09:30:46

Merci pour ta réponse Darit, j'ai essayé de préciser "no-repeat" dans mon fichier html, mais rien ne change. J'ai donc ensuite lier mon fichier html avec un fichier css tel que :

body
{
background-image: url("/index.jpg");
background-repeat: no-repeat;
}

mais rien ne change non plus :S

J'ai réussi à régler les valeurs pour les textes de ma page, et c'est ok, rien n bouge. Mais j'ai toujours ce problème avec mon arrière plan.

Merci d'avance.
Contenus similaires
13 Juin 2008 10:04:52

Ton code semble bon pourtant, étrange que cela ne marche pas... Tu as également supprimé dans ton code Html "l'affichage de l'image de fond" ?

Pourrais-tu m'afficher le début de ton code Html ?
13 Juin 2008 17:40:23

Merci beaucoup pour ton aide Darit,
Le début de mon code HTML est :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Index</title>
<link rel="stylesheet" href="design.css" />
<style type="text/css">
<!--
.Style3 {font-size: 18px}
.Style5 {font-size: 16px}
body, td, th {
color: #000000;
}
a:link {
color: #000000;
}
a:hover {
color: #000000;
}
a:visited {
color: #000000;
}
a:active {
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

J'ai aussi fait quelques modifications sur mon code css avec Dreamweaver:

body {
line-height: normal;
color: #000000;
background-attachment: scroll;
background-color: #95C0E2;
background-image: url(index.jpg);
background-repeat: no-repeat;
width: auto;
height: auto;
background-position: center top;
clear: Aucune;
float: Aucune;
position: relative;
}

De plus, je viens de me rendre compte que quand ma page est ouverte avec Internet Explorer, (en 1024 x 814), la taille de ma page est nikel, mais quand je l'ouvre avec Firefox ... tout est décalé au niveau de l'arrière-plan :S :??: 

Merci énormément d'avance ! :) 
13 Juin 2008 17:56:25

Bon 1ére chose, je ne comprends pas pourquoi tu mets du style et dans ta page Html et dans ta feuille Css. Autant tout mettre dans la feuille de style Css.

Pour ce qui est du style "body", je pense que tu peux enlever les lignes suivantes sans problème :
width: auto;
height: auto;
clear: Aucune;
float: Aucune;
position: relative;
... vu qu'elles ne sont pas utilisées...

Par contre, je ne comprends pas pourquoi ton image de fond est toujours "répétée"... c'est toujours le cas non ?
13 Juin 2008 18:05:04

Non, maintenant l'image ne se répète pas, mais on voit des bandes bleues sur le côté droit, et en bas (à la place de l'image qui recommence). Et quand je regarde sur une résolution 1280 x 1024, l'arrière-plan est petit, centrée au milieu en haut, et tout autour on a cette bande bleue claire.
13 Juin 2008 18:34:31

Merci beaucoup, en fait j'ai moi-même définie cette couleur (désolé je me suis mal éxprimée), parce qu'une partie de mon arrière-plan a cette couleur (c'est un dégradé de bleu). Mais je voudrais que l'on ne voit plus ces bandes bleues sur les côtés, et que les dimensions soient "vérouillées", pour que quand on regarde mon site, qu'on soit sur firefox, sur IE, avec une résolution de 1024 x 814 ou de 1280 x 1024, on voit toujours la même chose... mais je doute de plus en plus que ça soit possible :S

Je me demande si en fait je ne devrais pas déterminée une dimension, non pas de l'arrière-plan, mais de la page internet elle-même... enfin je ne sais pas, après des heures et des heures passées dessus, je ne sais plus quoi faire.

Merci énormément.
13 Juin 2008 20:38:53

Est-ce que ton site est en ligne ? Ca serait plus simple pour t'aider et/ou te donner des idées...

Sinon tu peux mettre en arrière plan un dégradé en réalisant une frise d'1 pixel de largeur et par dessus placer une balise div ayant pour fond ton arrière plan...
Anonyme
26 Septembre 2009 02:38:52

voila la repense

voila la repense:

Le code CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#arriere {
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}

Le code HTML:

<img id="arriere" alt="" src="araignees.jpg" />

bn chance.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS