cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

CSS Styling with pictures

SOLVED
Highlighted
Regular Member

CSS Styling with pictures

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

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: CSS Styling with pictures

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. 

View solution in original post

3 REPLIES 3
Highlighted

Re: CSS Styling with pictures

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. 

View solution in original post

Highlighted

Re: CSS Styling with pictures

Nice, 

 

Worked like a charm, thanks for the help.

 

Time for some cool user interfaces! 

Highlighted

Re: CSS Styling with pictures

Excellent, have fun!

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection