Skip to main content
1-Visitor
March 23, 2020
Solved

CSS Styling with pictures

  • March 23, 2020
  • 1 reply
  • 1752 views

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;
}

 

 

Best answer by ClayHelberg

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. 

1 reply

18-Opal
March 23, 2020

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. 

PhilipB1-VisitorAuthor
1-Visitor
March 23, 2020

Nice, 

 

Worked like a charm, thanks for the help.

 

Time for some cool user interfaces! 

18-Opal
March 23, 2020

Excellent, have fun!