Adaptation fond écran en fonction résolution
Fermé
wolfwood28
Messages postés
46
Date d'inscription
dimanche 5 octobre 2008
Statut
Membre
Dernière intervention
11 septembre 2014
-
11 janv. 2010 à 19:28
Saanboy - 3 févr. 2011 à 14:47
Saanboy - 3 févr. 2011 à 14:47
A voir également:
- Adaptation fond écran en fonction résolution
- Double ecran - Guide
- Fonction si et - Guide
- Capture d'écran samsung - Guide
- Ecran noir pc - Guide
- Ecran d'accueil iphone - Guide
7 réponses
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 500
11 janv. 2010 à 19:39
11 janv. 2010 à 19:39
Il faut éviter les photos comme arrières-plan et privilégier les motifs (images pouvant se répété).
wolfwood28
Messages postés
46
Date d'inscription
dimanche 5 octobre 2008
Statut
Membre
Dernière intervention
11 septembre 2014
5
11 janv. 2010 à 21:11
11 janv. 2010 à 21:11
C'est pas une photo c'est un fond d'écran mais bon le principe reste le meme.
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 500
11 janv. 2010 à 23:35
11 janv. 2010 à 23:35
Mais il faut éviter les images qui ne sont pas conçues pour être répétées.
Tu peux aussi générer l'image avec PHP, en passant des paramètres (la nb. de pixels en hauteur et en largeur de la fenêtre) par GET à l'aide de Javascript.
Tu peux aussi générer l'image avec PHP, en passant des paramètres (la nb. de pixels en hauteur et en largeur de la fenêtre) par GET à l'aide de Javascript.
wolfwood28
Messages postés
46
Date d'inscription
dimanche 5 octobre 2008
Statut
Membre
Dernière intervention
11 septembre 2014
5
12 janv. 2010 à 14:03
12 janv. 2010 à 14:03
Oula cela dépasse pour le moment mes compétences, mais j'ai bien compris ce que tu voulais dire merci. PAr contre tu saurais me dire comment faire pour fixé les images que j'y ajoute, pour ne pas qu'elles se déplacent en fonction de la résolution ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 500
12 janv. 2010 à 17:16
12 janv. 2010 à 17:16
Normalement l'image est calée en haut à gauche ...
Si tu la centre faut faire quelques minis calculs en JS.
Si tu la centre faut faire quelques minis calculs en JS.
wolfwood28
Messages postés
46
Date d'inscription
dimanche 5 octobre 2008
Statut
Membre
Dernière intervention
11 septembre 2014
5
12 janv. 2010 à 21:05
12 janv. 2010 à 21:05
Merci pour ta réponse mais en tenant compte de tes indications précédentes j'ai trouvé un tutoriel sur le site du zéro qui me permettra de faire quelque chose de plus simple en étant efficace pour une première ébauche.
Bonjour à toi Wolfwood28,
Si c'est toi qui a écrit ça , je demande parce que je ne vois pas de qui ce message peut venir :
"Etant en 1ere année de BTS informatique de gestion je suis en train de créer mon 1er site internet. Le problème auquel je dois faire face pour le moment et celui de l'adaptation de mon fond d'écran à toutes les résolutions..."
Bref, je ne peux certainement pas t'aider en ce qui concerne le PHP et CCS, mais je vais quand même te donner mon astuce que j'ai fait pour mon site en HTML et CSS. Si ça peut te donner des idées pour ta programmation, j'en serai très fier.
Je voulais un background qui s'ajuste à toutes résolutions avec une image superposée et que cette même image soit fixe à une position très précise mais qui puisse aussi s'étirer à toutes résolutions et pour couronner le tout, un texte visible sur l'image superposée au background.
Voilà mon code CSS :
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#background{
width:100%;
height:100%
}
#content{
position: absolute;
left:13%;
top:14%
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:22px;
text-align:center;
position:fixed
}
#bg2{
position: fixed;
width:75%;
height:75%
}
span.c2{
color:#800000;
font-family:Georgia;
font-size:100%
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:125%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici le Html :
<html>
<head>
</head>
<body>
<img src="images\fond3.jpg" alt="" id="background" name="background"/> <div id="content"><img src="images/image en .jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur"><span class="c1"><i>Texte 1</i></span>
<br />
<br />
<span class="c2">t<i>Texte 2 </i></span>
</div>
</div>
</body>
</html>
J'ai testé le tout avec : Explorer 8, Firefox, Google Chrome, Opéra et Safari et ça fonctionne à merveille.
Saanboy
Si c'est toi qui a écrit ça , je demande parce que je ne vois pas de qui ce message peut venir :
"Etant en 1ere année de BTS informatique de gestion je suis en train de créer mon 1er site internet. Le problème auquel je dois faire face pour le moment et celui de l'adaptation de mon fond d'écran à toutes les résolutions..."
Bref, je ne peux certainement pas t'aider en ce qui concerne le PHP et CCS, mais je vais quand même te donner mon astuce que j'ai fait pour mon site en HTML et CSS. Si ça peut te donner des idées pour ta programmation, j'en serai très fier.
Je voulais un background qui s'ajuste à toutes résolutions avec une image superposée et que cette même image soit fixe à une position très précise mais qui puisse aussi s'étirer à toutes résolutions et pour couronner le tout, un texte visible sur l'image superposée au background.
Voilà mon code CSS :
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#background{
width:100%;
height:100%
}
#content{
position: absolute;
left:13%;
top:14%
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:22px;
text-align:center;
position:fixed
}
#bg2{
position: fixed;
width:75%;
height:75%
}
span.c2{
color:#800000;
font-family:Georgia;
font-size:100%
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:125%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici le Html :
<html>
<head>
</head>
<body>
<img src="images\fond3.jpg" alt="" id="background" name="background"/> <div id="content"><img src="images/image en .jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur"><span class="c1"><i>Texte 1</i></span>
<br />
<br />
<span class="c2">t<i>Texte 2 </i></span>
</div>
</div>
</body>
</html>
J'ai testé le tout avec : Explorer 8, Firefox, Google Chrome, Opéra et Safari et ça fonctionne à merveille.
Saanboy
