Background Picture

Example Code


<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:150px;height:150px;overflow:scroll;background-image:url(http://www.htmlcodes.me/images/scroll-boxes/background-bubbles.gif)">
<h3>Background Picture Box</h3>
<p>Here's a demonstration of how to add a background image to a scroll box. We use the CSS 'background-image' property to do this.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/scroll-picture-box.cfm">Scroll Picture Box</a></p>


Result

Background Picture Box

Here's a demonstration of how to add a background image to a scroll box. We use the CSS 'background-image' property to do this.

Background Picture - No Repeat

Example Code


<!-- Codes by HTMLmagics -->
<div style="font-size:18px;color:black;border:1px solid black;width:150px;height:150px;overflow:scroll;background:#fff url(http://www.htmlcodes.me/images/scroll-boxes/bee.gif) no-repeat top left;">
<p>The background image on this scroll box doesn't repeat across the box. Instead, it just renders once, then let's us do our thing.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/scroll-picture-box.cfm">Scroll Picture Box</a></p>


Result

The background image on this scroll box doesn't repeat across the box. Instead, it just renders once, then let's us do our thing.

Scroll Picture Box Code

Example Code


<!-- Codes by HTMLmagics -->
<div style="border:1px solid black;width:220px;height:230px;overflow:scroll;">
<img src="http://www.htmlcodes.me/images/scroll-boxes/cartoon_creature.gif" width="150" height="217" alt="Cartoon creature" /><br />
<img src="http://www.htmlcodes.me/images/scroll-boxes/cartoon_vulture.gif" width="204" height="181" alt="Cartoon vulture" /><br />
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/scroll-boxes/scroll-picture-box.cfm">Scrolling Picture Box</a></p>

Result