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

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

CSS Styling with pictures

PhilipB
8-Gravel

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

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

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. 

Nice, 

 

Worked like a charm, thanks for the help.

 

Time for some cool user interfaces! 

Excellent, have fun!

Top Tags