Пользовательский resizeable div

Question

После создания resizeable div (изменение размера: оба - CSS) Я могу изменить его размер после нажатия на правый нижний угол div. В firefox это выглядит так:

Но я хочу разместить там свой пользовательский образ, как это сделать?

#resizeablediv { 
    width:200px; 
    height:200px; 
    resize:both; 
    background-color:black; 
    overflow:auto; 
} 

DEMO

Answer 1

Итак, я немного исследовал изменение размера. Это настолько новый, что не все основные браузеры даже поддерживают его. Из того, что я могу сказать, еще нет существующего метода рестайлинга этого элемента.

Вот страница спецификации для изменения размера:

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Так у вас есть 2 варианта, ни один из которых идеально подходит

1) Фоновое изображение. Это не скроет значок изменения размера, но, по крайней мере, будет закрывать его.

2) Наложение div, чтобы содержать ваше изображение с указателями-событиями: нет; применяется к нему. Значок все еще будет там, но он может быть скрыт под абсолютно позиционированным div, содержащим ваше изображение.

.custom-image{ 
    background:pink; //you could set this background to your custom image. 
    height:7px; 
    width:7px; 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    pointer-events: none; 
} 

Я обновил вашу скрипку, чтобы продемонстрировать. DEMO

Answer 2

background: grey url(http://i.stack.imgur.com/Ckblr.png) no-repeat bottom right; 

Answer 3

Это визуализируется браузером, и эти стили не могут быть изменены с CSS.Please попытайтесь поместить изображение (на заказ) в нижнем правом угле.