1 Topic by IntegriTivity

  • IntegriTivity
  • Member
  • Offline
  • From: Wentzville, MO
  • Registered: 2012-03-19
  • Posts: 8

Topic: How to set SIZE of background image of text area?

My form allows users to dynamically set a color or image background for their text area. I have it working for color, and I can set an image as the background (the image filename is a session var). However, the image is not being scaled to fit inside the text area box.  The commented lines below are methods I guessed at that do not work. Is there any syntax that will work, or another method?  If I have to, I can set the background to transparent and then display the image underneath it using z=index, but then I have to get the positioning just right to compensate for the tinyMCE toolbar at the top, and I really don't want to go there!


function ChangeBkgrdImage(editor_id) {

var myEditor = "AdText" + editor_id;
myBkImage = "url(/FilesRestaurants/<?php echo $_SESSION['AdFilenameFO']; ?>)";

//tinyMCE.getInstanceById(myEditor).getWin().document.body.style.background-size: 407px 670px;

//tinyMCE.getInstanceById(myEditor).getWin().document.body.style.backgroundSize: 407px 670px;

tinyMCE.getInstanceById(myEditor).getWin().document.body.style.backgroundImage = myBkImage;    
}

Thank you for your thoughts...

2 Reply by Seb33300

  • Seb33300
  • Member
  • Offline
  • From: France, Bordeaux
  • Registered: 2008-12-17
  • Posts: 37

Re: How to set SIZE of background image of text area?

background-size is a CSS 3 property and only work with recent browser like firefox or google chrome :
http://www.css3.info/preview/background-size/

Seb33300's Website

3 Reply by Krupski

  • Krupski
  • Member
  • Offline
  • From: United States of America
  • Registered: 2010-10-18
  • Posts: 501

Re: How to set SIZE of background image of text area?

Seb33300 wrote:

background-size is a CSS 3 property and only work with recent browser like firefox or google chrome :
http://www.css3.info/preview/background-size/

Background size can be set via JS and that's cross-browser (even works with MS Internet Destroyer).

"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

Krupski's Website

4 Reply by IntegriTivity

  • IntegriTivity
  • Member
  • Offline
  • From: Wentzville, MO
  • Registered: 2012-03-19
  • Posts: 8

Re: How to set SIZE of background image of text area?

Hmm, if that's correct, my first line of [now commented] code should have worked, as I was testing it in Firefox.
The reason I tested it the second way is that the syntax that worked to change the background IMAGE with tinyMCE was
.backgroundImage     instead of
.background-image     like CSS would require.

Unfortunately, however, both ways break my script.

Is there a different syntax for setting it in JS?

5 Reply by Krupski

  • Krupski
  • Member
  • Offline
  • From: United States of America
  • Registered: 2010-10-18
  • Posts: 501

Re: How to set SIZE of background image of text area?

IntegriTivity wrote:

Is there a different syntax for setting it in JS?

    var ed = tinymce.activeEditor;
    var body = ed.getBody();
    ed.dom.setStyle(body, "backgroundImage", "url(http://www.tinymce.com/forum/img/avatars/82883.gif)");
    ed.dom.setStyle(body, "backgroundRepeat", "repeat-x repeat-y");
    ed.dom.setStyle(body, "backgroundPosition", "center center");
"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

Krupski's Website

6 Reply by IntegriTivity

  • IntegriTivity
  • Member
  • Offline
  • From: Wentzville, MO
  • Registered: 2012-03-19
  • Posts: 8

Re: How to set SIZE of background image of text area?

Thank you, when I used that syntax and added the following line, it worked.

    ed.dom.setStyle(body, "backgroundSize", "200px");

I'm going to investigate using "contain" now; that might be even easier!