0

こんにちは、現在このサイトを開発中です:

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

実際には、Mac と PC ブラウザーで完全に動作します。ここでの問題は、Safari Ipad に入ると、一部の背景画像がまったく表示されず、他の画像にスケールの問題があることです。

だから、私の現在のCSSが、Ipadを初めて使用するので、現在調査しようとしている助けが得られるかどうかを確認してください。

これは IPAD 用の私の CSS です (PC と Mac 用に別の CSS があります):

#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%; 
}

そして、これはウィンドウの高さと幅を計算するための私のjqueryです:

$("#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')

したがって、背景コンテナには常に幅と高さが設定されています。

何か案は？

background-size を使用する場合のクイック編集: カバーは表示されますが、画像は非常に大きいです:/

4

1 に答える 1

0

解決策は、背景ごとに幅と高さを設定することでした。

#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;



}
于 2012-08-16T21:16:59.700 に答える