CSS: combine gradient background in header with image as logo

Question

I am trying to use this gradient:

background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgba(204, 202, 204, 1) 0%, rgba(204, 202, 204, 1) 11%, rgba(252, 252, 252, 1) 45%, rgba(252, 252, 252, 1) 53%, rgba(214, 212, 214, 1) 81%, rgba(204, 202, 204, 1) 88%) repeat scroll 0 0;

and this image:

background-image: url('./wp-content/uploads/2016/12/opt_tree_only.png');
background-size: contain;
background-repeat: no-repeat;
background-position: 10% 25%;

combined together, however I am failing to do so, because either it shows the gradient or the image, never both at the same time. I do not work much with CSS and therefore I have run out of more ideas how to implement it.

score 0 · Answer 1 · answered Dec 21 '16 at 15:05

You can add the gradient as a pseudo-element, like this:

div {
  height: 200px;
  width: 200px;
  background-image: url('http://placehold.it/350x350');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 10% 25%;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(204, 202, 204, 1) 0%, rgba(204, 202, 204, 1) 11%, rgba(252, 252, 252, 1) 45%, rgba(252, 252, 252, 1) 53%, rgba(214, 212, 214, 1) 81%, rgba(204, 202, 204, 1) 88%);
  opacity: .5;
}

<div></div>

CSS: combine gradient background in header with image as logo

1 Answers1