Better editor background

[azaozz]

When the editor body has max-width (most newer themes set that) the body in the TinyMCE iframe is aligned left or right (RTL), and the content suddenly stops in the middle (if the browser window is wide). This doesn't look good and is a bit weird and unexpected.

[azaozz]

Centering the body and adding a light background color to the html element looks a lot better (and resembles desktop editors most users are familiar with).

[azaozz]

21536.patch adds a centered white background on the html element and centers the body. The same effect can be achieved with CSS 3 (without an actual image) but wouldn't work in IE.

[azaozz]

In [21495]:

Better editor background, take one, see #21536

[toscho]

What I do in my editor stylesheets to stretch the body:

html
{
	background:         #bbb;
	height:             100%;
}
body
{
	max-width:          620px;
	background:         #eee;
	margin:             0 auto;
	padding:            20px;
	min-height:         100%;
	box-sizing:         border-box;
}

Note the box-sizing – it prevents unnecessary scroll bars.

[azaozz]

Replying to toscho:

What I do in my editor stylesheets to stretch the body...

Yeah, tried several similar styles. One problem with them is that when inserting a floated image the body doesn't stretch and looks "broken". Another problem is browser differences: without using background-image the css needs 4 variations to cover all supported browsers (yeah, IE7 too).

A nice way of doing this is to create a "flat" gradient for background-image with css3 instead of using a real image. Not working in IE < 10 though.

[azaozz]

Wontfix, see [21532].

[ericlewis]

For reference, ​discussion that reverted and closed this ticket.

[ericlewis]

#31967 was marked as a duplicate.