CODEWITHSUNDEEP
css
DelphianBoy
DelphianBoy

Reputation: 55

Add background property without overwriting the existing one

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

Upvotes: 3

Views: 1152

Answers (3)

Obsidian Age
Obsidian Age

Reputation: 42304

Both linear-gradient and url affect the background-image, so no, you cannot use those two in conjunction; the second one would overwrite the first.

When you combine these two rules in the following shorthand order:

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

Only the background-image of the second rule gets applied; the other rules from the first shorthand rule get ignored:

background-image: linear-gradient(rgb(0, 0, 0), rgb(17, 17, 17));
background-position-x: initial;
background-position-y: initial;
background-repeat-x: initial;
background-repeat-y: initial;

However, you can cause these additional rules to apply by specifying the gradient as the background-image manually:

background-image: url(./img/pc.png); /* Only rule to get overriden */
background-image: linear-gradient(rgb(0, 0, 0), rgb(17, 17, 17));
background-position-x: 20px;
background-position-y: center;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

This way your background-position-x, background-position-y, background-repeat-x and background-repeat-y rules can be applied in conjunction with your gradient... though it is impossible to have both of your background-url rules apply to the same element at the same time.

To have both the image and the gradient show up, I would recommend making use of two elements positioned on top of each other with position: absolute, and applying one background-image to each. The gradient would go on top, and be transparent so that the background image can be seen.

This can be seen in the following:

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

.background {
  background-image: url("http://placehold.it/100");
}

.gradient {
  background-image: linear-gradient(to bottom, transparent, #111111);
}
<div class="background"></div>
<div class="gradient"></div>

Upvotes: 0

Brett DeWoody
Brett DeWoody

Reputation: 62773

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272985

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>

Upvotes: 2

Related Questions