CSS Styling with pictures

[PhilipB]

Hello. 

I wonder if it is possible to do CSS styling with pictures. for example this code for styling a popup that I have: 

.Popup-Style {
  background-color:255,255,255;
  border-color: #000000;
  color: #FFFFFF;
  border-radius: 17px;
  opacity: 0.7;
}

This means that the background will be white of the popup. But what I'm thinking of, is it possible to change the background of plain white to a picture instead? (if you have it uploaded in resources) something like: 

.Popup-Style {
  background-color: /resources/Upload/Awesome_picture.jpg;
  border-color: #000000;
  color: #FFFFFF;
  border-radius: 17px;
  opacity: 0.7;
}

[ClayHelberg · Accepted solution]

Sure, you just have to use the background-image property instead of background-color. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-image for details.

In the URL, you'll want to use something like this:

url(#{$resources}/Uploaded/button_unselected.png);

That will find the image button_unselected.png in your Uploaded resources folder. 

[PhilipB]

Nice, 

Worked like a charm, thanks for the help.

Time for some cool user interfaces! 

[ClayHelberg]

Excellent, have fun!