# Imagens de fundo de categoria não escalonam bem para mobile

**URL:** <https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149>\
**Category:** UX\
**Created:** [Agosto 20, 2018, 6:24am 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:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)\
**Post date:** [Setembro 17, 2019, 8:17am UTC](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149/9 "2019-09-17T08:17:06Z")

</div>

> [@cjk77](#):
>
> Alternativamente, há uma maneira de implementar um fundo exclusivo para uma categoria/subcategoria individual usando CSS?

Descobri como fazer isso e achei que seria útil compartilhar a técnica que funcionou para mim. Para adicionar a imagem em `https://some.url` como fundo da categoria com o id `category-off-topic-rwby`, usei este CSS em um componente de 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);
    }
}

```

Isso centraliza a imagem em `https://some.url` e a dessatura (usando a propriedade opacity), além de torná-la fixa para que não role junto com a página. O resultado:

 ![PNG](https://global.discourse-cdn.com/meta/original/3X/2/1/219ae2e173aeef205ca27f075d1370b5c2cdc99e.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/category-background-images-do-not-scale-good-for-mobile/95149)._