Help with category background images

지원
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_07821920×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/를 사용합니다. 이 프로그램은 실행 파일을 제공하며, 이러한 제한 사항 없이 동일한 작업을 수행합니다. 또한 동일한 압축 방식을 사용하는 것으로 보입니다.