Ce CSS étend avec succès mon image de fond pour remplir 100% de la zone de l'écran et ne pas défiler sur Safari mais pas sur iOS. Comment puis-je également empêcher le défilement de l'image sur iOS?
body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x; background-size: auto 100%; background-attachment: fixed }
body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x fixed; }
J'ai renoncé à essayer de faire fonctionner mon iPhone avec CSS, et j'ai dû utiliser jQuery.
Dans ma page Web, j'ai ajouté un <div>
que je veux remplir l'écran:
<body> <div class="cssFullScreen" /> ...etc...
Puis j'ai ajouté deux cuillères à soupe de CSS …
<style> .cssFullScreen { position: absolute; left:0px; top:0px; background: url(BackgroundImage.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style>
..et un scoop réticent de jQuery …
<script src="jquery-2.2.3.min.js"></script> <script type="text/javascript"> $().ready(function () { ResizeWindows(); $(window).resize(function () { ResizeWindows(); }); }); function ResizeWindows() { // When the user resizes the window, we'll resize any DOM elements // with the "cssFullScreen" class. var width = window.innerWidth ? window.innerWidth : $(window).width(); var height = window.innerHeight ? window.innerHeight : $(window).height(); $(".cssFullScreen").width(width); $(".cssFullScreen").height(height); } </script>
Ce n'est pas joli, mais c'est la seule chose que j'ai pu find qui a vraiment marché sur un iPhone.
Et étrangement, ce code ne fonctionnait que sur un iPhone lorsqu'il était appliqué à un div
. Si j'ai essayé de l'appliquer directement sur le html
ou le body
, ça n'a rien fait …