How can I layer multiple CSS backgrounds without replacing the first one?

Write the gradient and image together in one comma-separated background-image list. The first listed layer is painted on top; the next is underneath it. [S1]

.card {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("[image-path]");
}

Here, the gradient is the tint on top, and the image is behind it. If you later set .card { background-image: url("[another-image]"); }, that declaration specifies a one-layer list; it does not retain the earlier two-layer list. To keep both, include both layers in the later declaration too.

Read each comma-separated list from left to right. The first value belongs to the frontmost layer, the second to the next layer back, and so on. This correspondence applies to properties such as background-position, background-repeat, and background-size. background-color is separate; it is not another comma-separated image layer. [S1]

For example, if the gradient should cover the card and the image should stay small in a corner:

.card {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("[image-path]");
  background-size: cover, 120px auto;
  background-position: center, left top;
  background-repeat: no-repeat, no-repeat;
  background-color: #f2f2f2;
}

The paired settings are: gradient → cover, centered, no repeat; image → 120px auto, left top, no repeat. The color is separate from those lists. The layer order is:

TOP:    gradient tint (first item)
        image         (second item)
COLOR:  background-color (separate)

No. You can change background-position separately while leaving background-image unchanged. Keep the position values in the same layer order, so the first position belongs to the gradient and the second to the image. [S1]

For instance, to keep the gradient centered and move the image to the right:

.card {
  background-position: center, right top;
}

The two values correspond to the two layers in order. The same alignment principle applies when you set repeat or size separately. [S1]

First list the layers in the visual order you want, from front to back. Then write matching values for the per-layer properties in that same order. For example, assuming you want a highlight above a tint above an image:

.card {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("[image-path]");
  background-position: center, center, left top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, 120px auto;
}

That example assumes the highlight and tint should cover the card while the image stays small; adjust those choices for your design. The order is highlight, tint, image, from top to bottom. As a quick check, count the image layers and the values you have specified for position, repeat, or size: each value corresponds to a layer in order. [S1]