html - infantil - fondo safari bebe

La imagen de fondo no se muestra en Safari

Question

Estoy trabajando en un diseño sensible y la clase "bgMainpage" tiene una imagen de fondo pero no se muestra en Safari en todos los dispositivos. He aplicado una cubierta de tamaño de fondo ya que es lo que el cliente quiere. También he agregado CSS específico para el navegador y no estoy seguro de qué hacer para que aparezca en Safari también. Chrome, FF, IE muestra la imagen bien. Algunas ideas ?

Proyecto Link

CSS:

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Answer 1

Convertí el formato de imagen de jpeg a gif y funcionó. Así que el CSS final es:

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Answer 2

Intenta cambiar o eliminar :::

background-attachment:fixed;

me funciona en safari .....

Answer 3

Llegué aquí desde una página de búsqueda de Google, por lo que en caso de que este problema surja para otra persona, solo asegúrese de verificar su código. Safari puede ser muy exigente con el código correcto, por lo que incluso si se escribe correctamente aquí en la pregunta, simplemente verifique eso. Si olvida el paréntesis final, no se mostrará, donde otros navegadores como Chrome asumirán que usted quiso colocarlo y renderizar la página correctamente. Asegúrese de que todo su código esté correctamente abierto / cerrado:

<div style="background-image:url(''../images/bg.jpg'');">HEY</div>

Answer 4

Me acabo de encontrar con este problema y ninguna de las soluciones propuestas solucionó esto. Resolví mi instancia de esto y se debió a protocolos mixtos: el sitio era https mientras que las imágenes de bg eran http. Esto provocó que la carga de las imágenes fallara silenciosamente y no se mostrara solo en Safari, en MacOS y solo para algunos usuarios.

Answer 5

Parece que al safari no le gusta

background-attachment: fixed;

Pero todavía quiero tener algo de paralaje, especialmente en los escritorios. Entonces, mi solución fue eliminar lo anterior de la clase .header simple y ponerlo bajo:

@media(min-width: 1334px)

Esto muestra mi imagen en la mayoría de los iPhones a través del iPad. Simplemente no cubre iPhone 6 Plus. La resolución de este teléfono está llegando al territorio del escritorio.

Answer 6

Por favor, intente con el siguiente código, es posible que deba cambiar el ancho, la altura y la URL.

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

Answer 7

Prueba este código.

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;

Answer 8

Safari tiene un error aparente en el que no mostrará algunas imágenes jpg / JPEG de un determinado tipo en fondos si se cumplen algunos criterios. Para uso en línea hay un tipo de imagen jpg llamado JPEG progresivo. Las imágenes jpg regulares codifican los datos de la imagen de arriba a abajo, y puedes verlos cargando de esa manera en línea. JPEG progresivo, por otro lado, codifica la imagen con mayor detalle progresivamente. Esto significa que se carga borrosa al principio y luego se aclara. Algunas personas piensan que esto se ve mejor en línea, por lo que se usa. Algunos optimizadores de imagen harán que los jpgs progresivos automáticamente para uso en línea.

En mi experiencia, Safari no mostrará jpgs cuando se cumplan algunos de los siguientes criterios:

• se utiliza codificación progresiva
• La imagen es un fondo (para un elemento o para toda la página).
• la imagen es grande (no sé cuán grande exactamente, pero tuve problemas con las imágenes que tenían miles de píxeles de ancho)
• posiblemente otras cosas, no he explorado completamente este error

No he podido recrear esto en ningún navegador excepto Safari.

Para solucionar este problema, puede volver a guardar la imagen, asegurándose de que no esté en un formato progresivo (photoshop, etc. tiene un selector para esto), o usar otro formato (gif, png, etc.)

Answer 9

Tenía un problema similar, pero no tenía control sobre la imagen porque Tumblr la estaba generando, por lo que las sugerencias progresivas no funcionaron. Revisé dos veces mi código y cualquier otra cosa que también se sugirió, finalmente intenté configurar un MIN-HEIGHT para la división con la imagen de fondo y Safari finalmente lo mostró como todos los demás navegadores. Espero que ayude a deshacerse de algunos dolores de cabeza.

Answer 10

Tengo el mismo problema y he resuelto este problema cambiando:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

a:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

y eso está funcionando bien en safari ahora :)

Answer 11

Tuve el mismo problema con Safari. Probé otras soluciones, lo único que funcionó para mí fue eliminar un índice z negativo .

Answer 12

Tuve el mismo problema y ninguna de las otras soluciones aquí solucionó el problema. Para mí, tenía una imagen de fondo en un ancla envuelta en un div. Todos los navegadores manejaron bien la imagen de fondo, excepto Safari 6. La solución para mí fue establecer la posición: relativa en la división y posición: absoluta en el enlace de anclaje.

Answer 13

Tuvo el problema y encontré esto, pero nada funcionó. Finalmente descubrió que a la URL () le faltaban los paréntesis de cierre. Incluso sin él, las imágenes de fondo funcionaron en IE 9+, Edge, Chrome y Firefox. Solo Safari, de los navegadores probados, no mostró imágenes de fondo.

Añadido el) y todo funcionó.

Answer 14

Yo tuve el mismo problema. Mi imagen era progresiva y, como JC Hulce respondió, safari tiene un error con eso.
Para verificar si su imagen es progresiva, vaya a: techslides.com/demos/progressive-test.html .
Para corregirlo, simplemente abra en photoshop y vaya al menú de menú-> guardar para web

Answer 15

tal vez porque la imagen está mal guardada. Tuve este problema una vez y tuve que cambiar lo siguiente:

abra su imagen en photoshop y guárdela "cmyk", esta opción debería ser modificable en la vista, configure-proof, cmyk-colors (lo siento, mi photoshop está en alemán)

espero que esto ayude