Cajas con barras de desplazamiento (Scrollboxes) con imagen de fondo

Como hemos explicado en los post anteriores, los Scrollboxes son cajas que disponen de barras de desplazamiento, y nos ayuda a simplificar mucho las entradas de nuestro blog cuando precisamos poner un texto largo, o imágenes.


Pero vamos a mostrar como podemos poner en nuestras cajas una imagen de fondo.

SCROLLBOXESx

Dejamos un fondo fijo.

Así quedaría el código.

<div style="border:1px solid black;width:150px;height:450px;overflow:scroll;background-image:url(https://s28.postimg.org/pcbp9zytp/cuaderno.jpg)">
<h3>SCROLLBOXESx</h3>
<p>Dejamos un fondo fijo.</p>
</div>

En este caso hemos puesto una borde sólido de 1px, color negro.
width:150px;height:450px: Esto es el ancho y la altura.
image:url ( la url de la imagen que queramos)

Aquí dejo otro código por si os interesa:

otra forma de poner un scrollboxes

<div style="height: 90px; overflow: scroll; padding: 5px; width: 450px;">
<div style="text-align: center;">
<b><span style="color: #444444; font-family: &quot;papyrus&quot;;"></span> </b>
<pre class="prettyprint prettyprinted" style="background-image: url(&quot;https://materialesetsam.files.wordpress.com/2010/11/dsc_0685.jpg&quot;); background-position: 100% 50%; border-radius: 8px; border: 4px solid rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 1px 1px 5px; font-stretch: normal; margin: 1em auto; padding: 1em; text-align: start; width: 402.5px;"><i style="color: white; font-family: &quot;Papyrus&quot;; text-align: center; white-space: normal;"><span style="white-space: pre-wrap;"><b>.value = 'ot';}" typ</b></span></i></pre>
</div>

nueva