1

I need to place a background inside an edit box, but I've tried various CSS code for hours. Nothing works!

I can customise the CSS, but I do not have access to modify the source code.

I want to add a background image inside this edit box

Here's the source code of the section I am interested in:

<div id="cke_1_contents" class="cke_contents cke reset" role="presentation" style="height: 200px;">
<span id="cke_26" class="cke_voice_label>Press Alt 0 for help</span>
    <iframe class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" aria-describedby="cke_26" title="Rich Text Editor,form_essay_content" src="" tabindex="0" allowtransparency="true" frameborder="0">
    #document
    <!DOCTYPE html>
        <html dir="ltr" lang="en">
            <head></head>
            <body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false" contenteditable="true">
            </body>
        </html>
    </html>
    </iframe>
</div>

What I want to do is to add an image of a postcard in the background. Like so:

I added an image as the backgound of the edit box via "Inspect element"

I've tried so many combinations of CSS code to add the image. Fail. Fail. Fail. Here's two of them. Please try not to laugh...

<style>
    #cke_1_contents.cke_editable .cke_editable_themed .cke_contents_ltr .cke_show_borders {
       background-image: URL(http://www.moodurian.com/tornado/images/postcard-mini.jpg);
    }

    #cke_1_contents body {
       background-image: URL(http://www.moodurian.com/tornado/images/postcard-mini.jpg);
    }

</style>

Well, it didn't work. Any ideas, anyone? Please note that I cannot modify the source code. So I can't add any additional < div >< /div > tags or < span >< /span > tags. I can only enter custom CSS to modify the page elements.

Thanks for reading this.

Regards Frankie Kam Malaysia

Frankie 'Moodurian' Kam
  • 157
  • 4
  • 17

2 Answers2

1

It looks like you're trying to add CSS rules that target elements inside the <iframe>, is that correct? If so - you will need to add those CSS rules to a CSS document that the iframe itself loads - CSS rules from the parent document won't affect the iframe content.

I found a relevant question here: CSS override body style for content in iframe?

Community
  • 1
  • 1
nicholasrice
  • 126
  • 1
  • 6
  • Hi rice119. Yes, I see. Having read the link you gave tells me that without access to the CSS code that the iframe loads, what I am trying to do can only be done in the Twilight Zone. Thank you all the same for pointing this out. Cheers. – Frankie 'Moodurian' Kam Feb 17 '17 at 17:18
0

Have you tried editing the body in CSS? You could try something like 

body {background-image: URL(http://www.moodurian.com/tornado/images/postcard-mini.jpg);}

I'm not sure why you're only able to edit the css and not the html. Seems a bit odd. Try this line of code and let me know if it works.

Luke Shinn
  • 346
  • 5
  • 12
  • Thanks for your speedy reply. I am using a cloud based service that runs an essay contest from within Facebook. See the tab named "Postcard Essay Competition": https://www.facebook.com/Kam-Fam-134012048474/app/395471657150951/ I can customise the CSS design by using an Admin backend GUI, but I do not have access to the source code. Here's how I customise the CSS: http://www.moodurian.com/tornado/images/customcode.jpg I've tried the body { } code you suggested, but it doesn't work. Thanks anyway. – Frankie 'Moodurian' Kam Feb 17 '17 at 17:03