帮助处理分类背景图片

支持
1

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

2

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).

IMG_0782
IMG_0782.JPG1920×1440 295 KB

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:

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, background-repeat, and background-position in your site’s CSS to find out which properties will work for your specific image.

3

Can we add this tip to the UI for the feature, somewhere?

4

i dont see anywhere under the category where CSS is.

image
image530×530 8.96 KB

or am i looking in the wrong places?

5

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.

body.category-other {
  // your CSS for the category here
}
8

类别背景（例如宽度）的推荐尺寸是多少？

另外，类别图片的推荐尺寸是多少？

9

两者都因你想要实现的效果而有很大差异……

对于背景图片……在保持文件大小合理的前提下（比如 150KB 左右？可以使用 https://tinypng.com/ 这样的服务来减小文件大小），尽可能宽一些。宽度大概在 1440px 到 1920px 之间……

对于分类标志或图片，我个人喜欢正方形，大约 150px 左右……但如果你在其他方面自定义了布局，那么任何尺寸或方向都可以很好地工作。

10

由于该网站存在一些限制，我有时也会使用 https://pngquant.org/。它提供可执行文件，能在没有这些限制的情况下完成同样的工作，而且我认为它使用了相同的压缩方法。