Add background property without overwriting the existing one

Question

I have an issue with CSS.

I have a gradient, with more than one instruction to make it compatible with any browser.

background: no-repeat 20px center url("./img/pc.png"), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#111111));
background: no-repeat 20px center url("./img/pc.png"), -webkit-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -moz-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -ms-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -o-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), linear-gradient(to bottom, #000000, #111111);

As you can see, there is also an image for the background. Now, imagine if this image was inline. It would be an enormous waste of space to copy and paste it many times.

Is there a way to do sometning like this:

background: no-repeat 20px center url("./img/pc.png");
background: linear-gradient(to bottom, #000000, #111111);

But without overwriting (and destroying) the first property (image) with the second call (gradient)?

Thanks

Answer 1

If you don't want to repeat yourself use CSS variable:

:root {
 --image:url("https://lorempixel.com/400/200/") center/100px no-repeat 
}

.box {
  height:200px;
  background: var(--image), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#111111));
  background: var(--image), -webkit-linear-gradient(top, #000000, #111111);
  background: var(--image), -moz-linear-gradient(top, #000000, #111111);
  background: var(--image), -ms-linear-gradient(top, #000000, #111111);
  background: var(--image), -o-linear-gradient(top, #000000, #111111);
  background: var(--image), linear-gradient(to bottom, #000000, #111111);
}

<div class="box">
</div>

<div class="box" style="--image:url(https://lorempixel.com/400/400/) center/100px no-repeat ">
</div>

Answer 2

Use an :after psuedo-element to add the gradient on top the image background.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
  background: no-repeat center center url(http://via.placeholder.com/350x150);
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #111111);
}

<div></div>