18 Juil image de fond pleine page: Jquery ou Css3

L’éternelle question se pose au moment de créer une page avec une image de fond qui s’adapte à la taille de la fenêtre :

Quel script utilisé ? Compatibilité des navigateurs Web ? Poids du script ? Etc. etc.

1° question : Jquery ou CSS3?

Moi je dis : CSS3 sans hésitation… Mais voilà

2° question : pourquoi ?

Moins lourd, plus simple et l’évolution est là donc utilisons la
le CSS3 (les commandes voulues pour cet effet) est compatible seulement avec les versions suivantes :

IE9 et + (version actuelle 9)
Firefox 4 et + (version actuelle 5)
Chome 10 et + (version actuelle 12)
Safari 5 et + (version actuelle 5)
Opera 11 et + (version actuelle 11)

pour la version CSS3, voici comment le codage se présente :

body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* pour safari ou chrome */
-moz-background-size: cover; /* pour safari ou chrome */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* pour IE8+ ou global */
}
html body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

voici un exemple: CSS3

Ensuite il y a le script Jquery, plus lourd donc plus long au chargement.

Compatibilité quasi totale avec les navigateurs sauf si l’internaute a désactivé le JavaScript de son navigateur.

Pour la version Jquery, voici comment le codage se présente:

Pour la partie CSS:

* {
margin: 0px;
padding: 0px;
}
img.bg {
position:fixed;
top:0;
left:0;
z-index:-1;
}

Pour la partie Jquery:

Voici un exemple :Jquery

Perso en tant que Webdev, je me dois de livrer les sites Web avec une compatibilité maximale, mais voilà, le problème est que si l’on veut de plus en plus d’effet et de moins en moins de poids de la page, il y a conflit d’intérêts.

Pour ce cas-là, la personne qui veut une image de fond qui s’adapte à la fenêtre, et que cet effet soit compatible avec les utilisateurs de IE6 (GRRRRRrrrrr), il faut utiliser du Jquery.
Mais pour les personnes utilisant IE6 (si ils utilisent encore IE6 ce n’est pas par commodité…), ces personnes-là ne sont pas des potentiels visiteurs au client, dans ce cas voici une petite astuce :
(mettre a la place de: « La condition ICI » par ça: if lte IE 6)

voici un exemple : IE6

Cette petite condition nous dit que si le navigateur du visiteur/clients et six il faut afficher le message, sinon il n’affiche rien, là le visiteur/client est averti et vous n’avez plus rien à faire, s’il ne veut pas utiliser ou installer un autre navigateur c’est son choix.
Il y a des façons plus jolies de le dire ou montrer (en alerte() JavaScript par exemple), mais j’aime bien faire ch… les utilisateurs de IE6