Embedding Image Files

How To
1

Images we add to the Embedded Files folder can be used in a variety of ways, but they cannot be referenced:

  1. Inside the Stylesheet
  2. In external linked CSS files
  3. In Style blocks in the application header

However, we can still reference images in our CSS. To accomplish this, we can embed them directly into our CSS using a Data URI. To create a Data URI, most image files need to be converted to base64 - only SVG files do not. The Data URI string can then be used to display a background image.

Steps

Converting a binary image to a base64 string:

  1. Go to this URL Image to Base64 | Base64 Encode | Base64 Converter | Base64 and upload your image file
  2. Choose the “Data URI” output format in the dropdown
  3. Click the “Encode Image to Base64” button
  4. Copy the resulting string

Displaying a Data URI in Stadium:

  1. Paste the Data URI into the CSS below
  2. Copy the entire class your application (e.g. into the stylesheet, an included CSS file or a style block in the header)
  3. The ‘selector’ below is called “.yourclass”. Change this name to any other classname you prefer
  4. Drag a Container control to your application
  5. Add the classname you have chosen to the Container classes property

Full CSS Example

Below is an example of the CSS attributes you will need. Adjust the values to suit your image:

.yourclass {   
   /*the width of the control*/ 
   width: 16px;
    /*the height of the control*/
   height: 16px;    
   /*the base64 encoded image or url encoded SVG*/
   background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
    /*the width and height of the background image*/
   background-size: 16px 16px;
    /*the x and y position of the background image*/
   background-position: center center;
    /*by default background images are repeated endlessly*/
   background-repeat: no-repeat; 
}

More information

There is a lot more you can do with background images. Read about it here