Problème avec mon background sur le forum Création de sites web - 02-12-2012 18:01:19

Liste des sujets

Problème avec mon background

Goku2361

Niveau 10

02 décembre 2012 à 18:01:19

Bonjour a tous^^

Je dois faire un site internet pour ma fac. Je voudrais donc mettre une image en arrière plan qui s'adapte a la taille de l'écran de l'utilisateur. J'ai donc trouvé un javascript qui permet de faire cela mais je n'arrive pas a le faire fonctionner voici le code de ma page :

<HTML>
<!DOCTYPE HTML5>
<HEAD>
<meta name="auteur" content="R.Thouroude et F.LERIQUIER">
<meta name="date" content="Never"
<meta name="sujet" content="Site sur les jeux indépedants">
<title>Accueil</title>
<link rel="Stylesheet" type="text/css" href="css/Feuille de style.css">
<style>
.BG{background:url(images/New lunar republic I.png);Background-attachment:fixed;Background-repe
at:no-repeat;
Background-size:cover; }

</style>

</HEAD>

<div>
<H1 class="Maintitle">Le jeu video indépendant</H1>
<hr color ="#cc0000"align="center" noshade size ="3" width="60%">
</div>

<br><br><br><br><br>
<div id="centre">
<a class=titre href="pages/Qu'es ce qu'un jeu indé.html">Qu'es ce qu'un jeu indépendant ?</a><br><br><br>
<a class=titre href="pages/les grands noms du jeu indé.html">Les développeurs connus.</a><br><br><br>
<a class=titre href="pages/jeux les plus connus.html">Quelques jeux indé</a><br><br><br>
<a class=titre href="pages/emission consacré jeux indé.html">Vidéomaker</a>
</div>

</body>

</HTML>

Merci d'avance pour votre aide^^

Xitik

Niveau 8

02 décembre 2012 à 18:11:28

Laisse tomber ton javascript !

Je vois pas ce que tu fais.
normalement dans ton css.
body{background-size:cover;}

devrait suffire.

Goku2361

Niveau 10

02 décembre 2012 à 18:15:07

J'aimerais bien pouvoir faire ça.... Mais notre prof d'info est une grosse feneante et n'a donc pas mis a jour les ordinateurs pour qu'il gèrent le CSS3.... Du coup on ne peut pas faire d'effet de transparence, ni de bordures arrondies et on ne peut pas utiliser background-size....

deepblue

Niveau 16

02 décembre 2012 à 18:28:16

Dans la vraie vie, tu ne fais pas de CSS3.

Goku2361

Niveau 10

02 décembre 2012 à 18:29:58

Hein?

Xitik

Niveau 8

02 décembre 2012 à 18:47:38

Bon un prof d'info qui apprends a ses élèves des trucs sur des machines dépasée? C'est un peu bizarre quoi. Mets ton navigateur a jour. Et dit lui qu'elle est stupide.

Goku2361

Niveau 10

02 décembre 2012 à 19:01:45

Déjà fait XD Mais il y a pas moyen.... donc du coup j'aimerais réussir a me démerder avec de javascript

Xitik

Niveau 8

02 décembre 2012 à 19:13:19

J'ai recherché un peu et j'ai trouvé ça, je n'ai pas testé mais ca devrait être ça.
http://stackoverflow.com/a/8940880

Goku2361

Niveau 10

02 décembre 2012 à 19:48:02

C'est quoi modernizr?

Xitik

Niveau 8

02 décembre 2012 à 21:01:42

Ecoute j'en sais rien, j'ai cherché je t'ai trouvé ça.
T'as juste a suivre les étapes, je vais pas le faire a ta place non plus.

Goku2361

Niveau 10

02 décembre 2012 à 21:12:06

Il faut installer un logiciel^^ Donc je peux pas XD

Xitik

Niveau 8

02 décembre 2012 à 21:13:56

Bon toi tu sais pas lire l'anglais, c'est ça?

Goku2361

Niveau 10

02 décembre 2012 à 21:15:40

Bah si mais c'est marqué install modernizr donc je peux pas...

http://webbricks.org/bricks/bgMax/
j'avais trouvé celui la mais c'est celui ci que je n'arrive pas a appliquer.

Xitik

Niveau 8

02 décembre 2012 à 21:17:39

Je vais y regarder.
Et je pense que les accent sont interdit dans les urls (a confirmer) ainsi que les espace pour les noms de fichier.

Goku2361

Niveau 10

02 décembre 2012 à 21:49:24

J'ai tenté de le faire marcher de mon coté mais je n'y arrive pas... je ne vois pas ou j'ai fait des erreurs.

Xitik

Niveau 8

02 décembre 2012 à 21:50:13

Bon alors tu aura besoin du fichier "bgMax.min.js" qui se trouve ici : http://www.filedropper.com/bgmaxmin tu place le fichier dans le même dossier que ta page html.

Ensuite dans ton code , juste après tes balises <title> tu mets ceci : <script src="bgMax.min.js" type="text/javascript"></script>

et après juste avant ton </body> tu mets : <script type="text/javascript">
bgMax.init('http://www.favorisxp.com/fond-ecran/fo
nd-ecran-paysage.jpg'/*<=
ici tu met ton image*/, {
mode : "full",
position : "fixed",
enlarge : 0,
fadeAfter : 0
});</script>

Bon et si tu veux, voici ta page déjà modifiée. J'ai modifié d'autres trucs pour la rendre plus "conforme" même si il te reste des trucs a faire. http://pastebin.com/Uk5Jy9v0

MAIS N'OUBLIE PAS de telecharger le fichier .js

Xitik

Niveau 8

02 décembre 2012 à 21:52:29

Mais le résultat sera toujours moins bon qu'avec background-size:cover; .

Goku2361

Niveau 10

02 décembre 2012 à 21:52:51

OUAH merci c'est juste super sympa^^ Je te remercie vraiment^^ Je regarde ca tout de suite :p

Goku2361

Niveau 10

02 décembre 2012 à 22:00:44

Ah mince ça ne fait pas ce que j'avais prévu... Je pensais que l'image allait se mettre en background or la elle se met en dessus de mon titre. Tant pis XD

Goku2361

Niveau 10

02 décembre 2012 à 22:04:55

Ca fait ce que je voulais avec chrome^^ Mais bien sur ils regarderont notre site sur explorer....

Aide à l'achat Mac
Création de Jeux
Linux
Création de sites web
Programmation
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News jeu

34 236 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu