Combine background-colour CSS3 with a image semitransparent

Question

How can i combine a background-image with a degraded background-color in CSS3?

The css code:

background: linear-gradient(rgb(208, 208, 208), rgb(242, 242, 242) 50%, rgb(208, 208, 208)) repeat scroll 0% 0% transparent;
box-shadow: 0px 0px 5px rgb(51, 51, 51);
border: 1px solid rgb(239, 241, 239);
position: relative;

And the image is this:

http://d227xyj983n2jj.cloudfront.net/wp-content/uploads/2013/09/scoring.png

That image is a example. I know that this effect degraded with the image combine is a great effect... But i don't know combine it... Help!

score -1 · Answer 1 · edited May 23 '17 at 11:43

You can combine gradients and images in a background see:
How do I combine a background-image and CSS3 gradient on the same element?

For the added transparency you can simply use rgba() rather than rgb() like so:

Working Example

html,
body {
  height: 100%;
}
div {
  background: url("http://d227xyj983n2jj.cloudfront.net/wp-content/uploads/2013/09/scoring.png") repeat scroll 0% 0%, -moz-linear-gradient(rgba(208, 208, 208, 0.5), rgba(242, 242, 242, 0.5) 50%, rgba(208, 208, 208, 0.5));
  box-shadow: 0px 0px 5px rgb(51, 51, 51);
  border: 1px solid rgb(239, 241, 239);
  position: relative;
  height: 100%;
}

<div></div>

Combine background-colour CSS3 with a image semitransparent

1 Answers1