Adaptation fond écran en fonction résolution
wolfwood28
Messages postés
47
Statut
Membre
-
Saanboy -
Saanboy -
Bonjour à tous,
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.
Je travaille sur un écran 24" et mon fond d'écran colle parfaitement à celui ci, par contre si je passe sur un écran 19" mon fond d'écran ainsi que l'image que j'ai ajouté sont déplacé, coupé... Bref, sa ne ressemble plus à rien.
Je code pour le moment en XHTML, PHP et CCS. Si quelqu'un a une solution pour moi, elle est la bienvenue. N'hésitez pas à me demander plus amples informations je reste à disposition, merci d'avance.
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.
Je travaille sur un écran 24" et mon fond d'écran colle parfaitement à celui ci, par contre si je passe sur un écran 19" mon fond d'écran ainsi que l'image que j'ai ajouté sont déplacé, coupé... Bref, sa ne ressemble plus à rien.
Je code pour le moment en XHTML, PHP et CCS. Si quelqu'un a une solution pour moi, elle est la bienvenue. N'hésitez pas à me demander plus amples informations je reste à disposition, merci d'avance.
A voir également:
- Adaptation fond écran en fonction résolution
- Fonction si et - Guide
- Double ecran - Guide
- Comment mettre une vidéo en fond d'écran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Retourner ecran pc - Guide
7 réponses
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.
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
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.
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
