how to make a button have a background image and be transparent at the same time?

Question

How can I make it so that the background of a button HTML tag has a background image and also has a transparent background using CSS/html?

I have the following HTML

<button style="backgroud-image: url('../images/example.png');"></button>

Answer 1

You will want to use the opacity property.

The value of this property can be 0-1 with zero being transparent and 1 being fully opaque.

As noted by @Tah Tatsumoto, this will change the entire opacity of the button, including text.

button{
  background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'); 
  background-size:contain;
  height:100px;
  width:100px;
  opacity:0.5;
}

<button>Hello</button>