2012-08-01 4 views
0

Salut im développe actuellement ce site:images d'arrière-plan ne rendant pas correctement et d'autres DonT apparaissent sur Ipad

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

est en fait fonctionne parfaitement sur Mac et sur les navigateurs PC, le problème ici est quand je vais dans Safari Ipad certaines images de fond ne montrent pas du tout et les autres ont des problèmes d'échelle. Donc, je vous montre mon CSS actuellement si je peux obtenir de l'aide im essayant d'enquêter pour le moment depuis im nouveau sur Ipad.

Ceci est mon css pour l'IPAD (theres un autre pour PC et Mac):

#fondo1{ 
    background-image: url("images/imagesbackground/BACKGROUND-INICIO.jpg"); 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size: 1440px 950px; 
    -webkit-background-size: 1440px 950px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 
#fondo1int{ 
    background-image: url("images/INICIO.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: 50%; 
    -moz-background-size: 50%; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: block; 
    top: 0; 
    left: 0; 
} 

#fondo2{ 
    background-image: url("images/imagesbackground/BACKGROUND-HISTORIA.jpg"); 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size: 1440px 950px; 
    -moz-background-size: 1440px 950px; 
    -webkit-background-size: 1440px 950px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

#fondo2int{ 
    background-image: url("images/BACKGTOUND-TEXTO-HISTORIA.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: 50%; 
    -moz-background-size: 50%; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

Et ceci est mon jquery pour calculer la hauteur de la fenêtre et la largeur:

$("#todoini,#todohistoria , #todocoleccion , #todocuidados, #todosucursales,#todocontacto").css('height', $(window).height()); 
$("#todoini, #todohistoria , #todocoleccion , #todocuidados, #todosucursales,#todocontacto").css('width', $(window).width()); 
$("#navimage").css('margin-left', $(window).width()/2 - 140); 
$("#navimage").css('margin-top', $(window).height() -140); 
$("#contenidoimagen , #contenidoimagen2 , #contenidoimagen3 , #contenidoimagen4, #contenidoimagen5,#contenidoimagen6").css('width', $(window).width()); 
$("#contenidoimagen, #contenidoimagen2 ,#contenidoimagen3 , #contenidoimagen4 , #contenidoimagen5,#contenidoimagen6").css('height', $(window).height()); 
$("#todo").css('width', $("#todoini").width() + $("#todohistoria").width() + $("#todocoleccion").width() + $("#todocuidados").width() + $("#todosucursales").width() + $("#todocontacto").width()); 
$("#todoini , #todohistoria, #todocoleccion, #todocuidados, #todosucursales, #todocontacto").css('float', 'left'); 
$(window).resize(function() { 
    $("#todoini,#todohistoria , #todocoleccion , #todocuidados, #todosucursales, #todocontacto ").css('height', $(window).height()); 
    $("#todoini,#todohistoria , #todocoleccion , #todocuidados, #todosucursales, #todocontacto").css('width', $(window).width()); 
    $("#contenidoimagen , #contenidoimagen2 , #contenidoimagen3 , #contenidoimagen4, #contenidoimagen5 , #contenidoimagen6").css('width', $(window).width()); 
    $("#todo").css('width', $("#todoini").width() + $("#todohistoria").width() + $("#todocoleccion").width() + $("#todocuidados").width() + $("#todosucursales").width() + $("#todocontacto").width()); 
}); 
$(window).trigger('resize') 

Ainsi, l'arrière-plan conteneur ont toujours une largeur et un ensemble de hauteur.

Des idées?

modifier rapide si j'utilise la taille de fond: Couverture il montre, mais l'image est grande hella:/

Répondre

0

Solutions a été d'installer une largeur et la hauteur pour chaque arrière-plan.

#fondo1{ 
    background: url("images/imagesbackground/BACKGROUND-INICIO.jpg"); 
    background-position: top center; 
    background-repeat:  no-repeat; 
    -webkit-background-size: 1024px 768px !important; 
    position:absolute; 
    width:1024px !important; 
    height:768px !important; 



} 
#fondo1int{ 
    background-image: url("images/INICIO-OTONO.png") !important; 
    background-position: center center; 
    background-attachment: initial; 
    background-repeat:  no-repeat; 
    background-size: 800px 400px !important; 
    position:absolute; 
    width:1024px !important; 
    height:768px !important; 



} 
Questions connexes