# Les images d'arrière-plan des catégories ne s'adaptent pas bien sur mobile
**URL:** https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149
**Category:** UX
**Created:** [Août 20, 2018, 6:24 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149 "2018-08-20T06:24:37Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [Août 20, 2018, 6:24 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/1 "2018-08-20T06:24:37Z")
category background image doesn’t scale correctly in mobile ux,
here is the background image in desktop:
the same image in a topic for mobile ux:
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [Août 20, 2018, 6:50 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/2 "2018-08-20T06:50:05Z")
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?
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [Août 20, 2018, 8:58 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/3 "2018-08-20T08:58:39Z")
here are two samples:
[https://padpors.com/c/PP-Porch/Library](https://padpors.com/c/PP-Porch/Library)
[https://padpors.com/c/PP-Porch](https://padpors.com/c/PP-Porch)
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:
[https://padpors.com/t/آیا-تا-حالا-تجربه-ای-از-کار-داوطلبانه-بین-المللی-توی-حوزه-کامپیوتر-داشتین؟/10482/?safe\_mode=no\_custom%2Cno\_plugins%2Conly\_official](https://padpors.com/t/%D8%A2%DB%8C%D8%A7-%D8%AA%D8%A7-%D8%AD%D8%A7%D9%84%D8%A7-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D8%A7%DB%8C-%D8%A7%D8%B2-%DA%A9%D8%A7%D8%B1-%D8%AF%D8%A7%D9%88%D8%B7%D9%84%D8%A8%D8%A7%D9%86%D9%87-%D8%A8%DB%8C%D9%86-%D8%A7%D9%84%D9%85%D9%84%D9%84%DB%8C-%D8%AA%D9%88%DB%8C-%D8%AD%D9%88%D8%B2%D9%87-%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D8%AF%D8%A7%D8%B4%D8%AA%DB%8C%D9%86%D8%9F/10482/?safe_mode=no_custom%2Cno_plugins%2Conly_official)
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [Août 20, 2018, 9:28 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/5 "2018-08-20T09:28:15Z")
thanks, but I’m a little bit confused:
we used the **category setting** to add the background and not a theme.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [Août 20, 2018, 9:34 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/6 "2018-08-20T09:34:03Z")
Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion 🌻
I’ll take a look and see what I can do to make it look nicer 👍
---
### Author:  [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [Septembre 15, 2019, 2:27 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/8 "2019-09-15T14:27:33Z")
Des nouvelles à ce sujet ? Je songe à les mettre en œuvre pour quelques sous-catégories que nous sommes sur le point d’ajouter, et elles ont effectivement l’air affreuses sur mobile …
Sinon, existe-t-il un moyen d’implémenter un arrière-plan unique pour une catégorie ou une sous-catégorie spécifique en utilisant CSS ?
---
### Author:  [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [Septembre 17, 2019, 8:17 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/9 "2019-09-17T08:17:06Z")
> [@cjk77](#):
>
> Sinon, existe-t-il un moyen d’implémenter un arrière-plan unique pour une catégorie ou sous-catégorie individuelle en utilisant du CSS ?
J’ai trouvé comment faire et j’ai pensé partager la technique qui a fonctionné pour moi. Pour ajouter l’image située à l’adresse `https://some.url` en tant qu’arrière-plan de la catégorie dont l’identifiant est `category-off-topic-rwby`, j’ai utilisé ce code CSS dans un composant de thème :
```
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);
}
}
```
Cela centre l’image située à `https://some.url` et la désature (en utilisant la propriété `opacity`), tout en la fixant pour qu’elle ne défile pas avec la page. Voici le résultat :
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [Septembre 17, 2019, 8:40 UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/10 "2019-09-17T08:40:00Z")
> [@cjk77](#):
>
> Je pense à les implémenter pour quelques sous-catégories que nous allons ajouter, et elles ont effectivement l’air terrible sur mobile.
Je suppose que vous utilisez un appareil iOS ? Si c’est le cas, la faute incombe en partie seulement à Discourse. Les appareils iOS ne respectent pas `background-attachment: fixed;`, qui est la propriété CSS actuellement utilisée dans Discourse pour créer l’effet d’un arrière-plan de corps fixe lorsque vous définissez des images de catégorie.
La raison pour laquelle les appareils iOS ignorent cette propriété est liée à leurs préoccupations concernant le redessin constant qu’elle provoque.
Voici quelques exemples de ce que je veux dire :
Si vous utilisez une couleur CSS unie comme arrière-plan, la seule chose qui est redessinée lors du défilement est la barre de défilement — surlignage vert.
[https://global.discourse-cdn.com/meta/original/3X/4/8/48610cb3cfe6aa4093840e6cabe2e9b671b3dab9.mp4](https://global.discourse-cdn.com/meta/original/3X/4/8/48610cb3cfe6aa4093840e6cabe2e9b671b3dab9.mp4)
Jusqu’ici tout va bien. Cependant, dès que vous ajoutez une véritable image et que vous la combinez avec `background-attachment: fixed;`, le navigateur doit constamment la redessiner pour la maintenir en place à chaque défilement.
[https://global.discourse-cdn.com/meta/original/3X/e/9/e98901f6c5b71daa6d1443f2ccd5c56d53ca6eda.mp4](https://global.discourse-cdn.com/meta/original/3X/e/9/e98901f6c5b71daa6d1443f2ccd5c56d53ca6eda.mp4)
Remarquez comment l’arrière-plan est redessiné à chaque défilement ? C’est pourquoi les appareils iOS ne respectent pas cette propriété.
Votre correctif est bon, mais vous continuez à obliger le navigateur à redessiner les arrière-plans, tout comme dans la vidéo ci-dessus.
Cela figure sur ma liste depuis un moment, mais je vais essayer de trouver un moyen d’intégrer un correctif dans les trois prochaines semaines.
Si vous ne pouvez pas attendre aussi longtemps, voici ce que je prévois d’implémenter, et vous pouvez l’essayer dans votre thème.
> **[Fix scrolling performance with CSS will-change property - Four Kitchens](https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/)**
>
> I recently saw Paul Lewis' screencast demonstrating how trivial it can be to fix a particular kind of performance issue caused by scrolling. I knew the problem looked familiar and I realized it was happening right in my front yard, on the Four...