Las imágenes de fondo de categoría no escalan bien para móviles

Contribuir UX
1

category background image doesn’t scale correctly in mobile ux,

here is the background image in desktop:

png_fixed

the same image in a topic for mobile ux:

jpg_fixed

1 me gusta
2

I’m not aware of anyway to add background images to topic pages based on the topic category (which is what the second screenshot looks like) except via a theme.

Category images only show up on top of their pages and on the categories topic-list. How are you adding these images? Can you please share a link to a page where I can see this?

2 Me gusta
3

here are two samples:

https://padpors.com/c/PP-Porch/Library

even in safe-mode and when the themes are deactivated, you can see the background image in a topic page. e.g. of safe-mode activated page:

5

thanks, but I’m a little bit confused:

we used the category setting to add the background and not a theme.

image
image.png781×635 62.6 KB

2 Me gusta
6

Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion :sunflower:

I’ll take a look and see what I can do to make it look nicer :+1:

6 Me gusta
8

¿Hay alguna novedad al respecto? Estoy pensando en implementarlos para algunas subcategorías que estamos a punto de añadir, y en efecto, se ven horribles en móviles…

Alternativamente, ¿hay alguna forma de implementar un fondo único para una categoría o subcategoría individual usando CSS?

9

Descubrí cómo hacerlo y pensé en compartir la técnica que funcionó para mí. Para agregar la imagen de https://some.url como fondo de la categoría con el id category-off-topic-rwby, utilicé este CSS en un componente del tema:

body[class~="category-off-topic-rwby"] {
    #background {
    background: url(https://some.url);
    background-position: center center;
    background-size: cover;
    z-index: -1;
    opacity: .50;
    min-width: 100vw;
    width: auto;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    }
}

Esto centra la imagen de https://some.url y la desatura (usando la propiedad opacity), además de fijarla para que no se desplace junto con la página. El resultado:

PNG
PNG1333×1147 364 KB

3 Me gusta
10

Supongo que estás usando un dispositivo iOS. Si es así, esto es solo parcialmente culpa de Discourse. Los dispositivos iOS no respetan background-attachment: fixed;, que es la propiedad CSS que utiliza actualmente Discourse para lograr el efecto de un fondo fijo en el cuerpo cuando se establecen imágenes de categoría.

La razón por la que los dispositivos iOS ignoran esa propiedad se debe a sus preocupaciones sobre la repintado constante que provoca.

Aquí tienes algunos ejemplos de lo que quiero decir:

Si usas un color CSS sólido como fondo, lo único que se repinta al hacer scroll es la barra de desplazamiento: resaltado en verde.

Hasta aquí todo bien. Sin embargo, una vez que añades una imagen real y la combinas con background-attachment: fixed;, el navegador tiene que repintarla constantemente para mantenerla en su lugar con cada desplazamiento.

¿Notas cómo el fondo se repinta con cada desplazamiento? Por eso los dispositivos iOS no respetan esa propiedad.

Tu solución es buena, pero aún así estás provocando que el navegador repinte los fondos, tal como muestra el video anterior.

Esto ha estado en mi lista de pendientes por un tiempo, pero intentaré incluir una solución en las próximas tres semanas.

Si no puedes esperar tanto, esto es lo que planeo implementar y puedes probarlo en tu tema:

3 Me gusta