Help with category background images

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:

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.

9 Likes