28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background-size cover et iphone 3

Bonjour à tous,

Je suis en train d'intégrer un site mobile pour un client et j'ai un petit soucis avec mon background : il ne s'étend pas sur l'iphone 3. Tout est ok sur le 4 et aussi sur le galaxy s3. 


#MAIN_HP{
		width:100%;
		background:url(../images/fd_hp.jpg) no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover; /* version standardisée */
	}

Voilà pour le css qui est appliqué sur un div.

Je me suis basée sur ce tuto : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Je ne veux pas utiliser la solution javascript pour des questions de poids...

Je suppose donc que l'OS est trop vieux donc qu'il ne prend pas en charge le baground-size...

Est-ce que quelqu'un aurait une piste ou une solution ?
En effet je vais laisser tomber cet ancêtre !! J'expliquerais à mon client que la majorité des utilisateurs ont un iOS plus récent.

J'ai quand même une autre question : pourquoi est-ce que pour voir mon image de fond je dois mettre un min-height ? 

#MAIN_HP{
		width:100%;
		background:url(../images/fd_hp.jpg) no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-clip: content-box;
		min-height:380px;
	}


Dans cet div je place mes autres éléments en absolute pour pouvoir les caler comme je le souhaite.
Administrateur
macara a écrit :

J'ai quand même une autre question : pourquoi est-ce que pour voir mon image de fond je dois mettre un min-height ?

Parce que ton conteneur div n'a aucun élément dans le flux courant (ses enfants en position absolute sont hors du flux)
Bonjour.

Je squatte ce post car mon problème est similaire (même tuto aussi).

j'ai un iPhone 3GS avec iOS6, mais mon background ne s'affiche pas du tout, j'ai un '?' bleu à la place...

Sur PC, MAC, iPad, WindowsPhone 8, etc., tout est OK.
Je n'ai pas d'iPhone plus récent sous la main pour tester.

Des idées ? Smiley sweatdrop
Merci.

EDIT: image trop grande (2000px) réduite à 1000px et ça passe partout.
Modifié par Astral God (22 Jul 2013 - 15:26)
Sujet clos
Aller à