New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Set a transparent background to RadEditor


Learn how to make RadEditor content area iframe transparent


In order to set the background color of RadEditor to be transparent follow the steps below: 1. Add the following CSS in the head section of the webpage:

        <style type="text/css">
            body {
                background: lightgreen;

            div.RadEditor td {
                /*This color is specific to the Default editor skin! If you are using another skin, change the color!*/
                background-color: #ececec !important;

            div.RadEditor .reContent,
            div.RadEditor .reContent iframe {
                background: transparent !important;
  1. Add the following JavaScript below the style tag in the head section of the page:
    <script type="text/javascript">
        function OnClientLoad(editor) {
            var editorframe = editor.get_contentAreaElement();
            editorframe.allowTransparency = true;
   = "transparent";
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"></telerik:RadEditor>
In this article