# Help with category background images
**URL:** https://meta.discourse.org/t/help-with-category-background-images/104709
**Category:** Support
**Created:** [December 19, 2018, 9:01pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709 "2018-12-19T21:01:06Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 19, 2018, 9:01pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/1 "2018-12-19T21:01:07Z")
what size background image works best? I have tried over 100 images and gifs, and they all get stretched, and blurry. usually 1/2 the image isn’t even viewable
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 19, 2018, 9:26pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/2 "2018-12-19T21:26:21Z")
You’re going to want something fairly large in dimension and in a landscape orientation (but watch out for file size too, you don’t want to force everyone to download a huge image).
For example, I accidentally took this photo of my couch. The dimensions are 1920 x 1440 and it fits my screen as a background image (text is unreadable over it, but that’s a separate issue).
Note that the image is set to `background-size: cover;` by default — so this means that the image will be scaled-up to fill the entire browser window without repeating the image (and likely cropped somewhat unless my window is in the same 4:3 ratio as the image). Small images will be sized up proportionately until they fit the entire window. You can change this behavior using CSS for the category, for example:
```plaintext
body.category-example {
background-size: 25%:
}
```
Now your background image is much smaller, and tiled to fill the screen.
You’ll want to work with [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size), [background-repeat,](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) and [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) in your site’s CSS to find out which properties will work for your specific image.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 20, 2018, 12:59am UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/3 "2018-12-20T00:59:28Z")
> [@awesomerobot](#):
>
> You’re going to want something fairly large in dimension and in a landscape orientation
Can we add this tip to the UI for the feature, somewhere?
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 20, 2018, 3:18am UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/4 "2018-12-20T03:18:34Z")
> [@awesomerobot](#):
>
> You can change this behavior using CSS for the category, for example:
>
> ```plaintext
> body.category-example {
>
> ```
i dont see anywhere under the category where CSS is.
or am i looking in the wrong places?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 20, 2018, 3:26am UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/5 "2018-12-20T03:26:10Z")
All of your CSS is controlled under `admin > customize > themes`, by “CSS for the category” I meant that you can target a specific category because we add CSS classes to the page when relevant.
So in the case of a category named “Other” we add the `.category-other` class to the page’s body tag, so you can use something like this in your general customizations to target that specific category.
```CSS
body.category-other {
// your CSS for the category here
}
```
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 2, 2020, 7:56pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/8 "2020-03-02T19:56:58Z")
What is a recommended size for Category background say width?
Also looking for recommended sizing for doing a Category Image.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 2, 2020, 8:26pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/9 "2020-03-02T20:26:22Z")
Both vary a lot based on what effect you’re trying to achieve…
For background images… probably as wide as you can get while keeping the file size reasonable (say maybe under 150k or so? a service like [https://tinypng.com/](https://tinypng.com/) can help reduce filesize). Probably in the range of 1440px - 1920px wide…
For category logos/images I personally like squares, around 150px or so… but if you’re customizing the layout otherwise really any size/orientation can work well.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 2, 2020, 8:28pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/10 "2020-03-02T20:28:36Z")
> [@awesomerobot](#):
>
> a service like [https://tinypng.com/](https://tinypng.com/) can help reduce filesize
Since there are some limitations with this website, I sometimes use [https://pngquant.org/](https://pngquant.org/). It has an executable and will do the same job without these limitations, and I think it uses the same compression method.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [February 14, 2024, 7:36am UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/11 "2024-02-14T07:36:46Z")
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [April 16, 2024, 12:04pm UTC](https://meta.discourse.org/t/help-with-category-background-images/104709/12 "2024-04-16T12:04:24Z")