Scroll Picture Box

alaman ini berisi gulir HTML code kotak gambar. Jangan ragu untuk copy dan paste kode warna kotak gambar scroll ke situs web Anda sendiri, blog, halaman MySpace, atau dokumen HTML lainnya. Dan merasa bebas untuk memodifikasi kode yang Anda inginkan.

Juga, silakan mempertimbangkan menjaga link kembali ke website ini - jika Anda melakukannya akan sangat dihargai!

Contoh-contoh di halaman ini menunjukkan bagaimana untuk menempatkan gambar ke dalam kotak gulir. Jika Anda menemukan halaman ini ketika mencoba untuk menemukan kode untuk bergulir gambar, memeriksa bagaimana untuk membuat gambar bergulir.

Gulir Gambar Box Kode

Contoh ini membuat gambar kotak yang gulungan ketika gambar tidak sesuai dengan kotak dengan benar. Gambar-gambar yang ditambahkan dengan menggunakan tag HTML img.

Scroll Picture Box Code

Code	Example
<div style="border:1px solid black;width:220px;height:230px;overflow:scroll;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDCp_73OYQW4FVp-Bc4OACAi63yv6veIM6ZUenlmUJ-Yu0YLGlVPzT_rCpqpWK0czx0WTfElDFf8YvPn4yT9XKE3vvjFtS9j7MUKDDz0zBxyzb6QkKfrt3vPlgXNMyv6XZMa-QwQBo6X3t/s1600/angrybird1.jpg" width="204" height="181" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt2BB14kTnR-yY3L9BPURXtes7GDeY9gt87rz6bR9erN6mING0u7UnNf7MCAKzRdTom2V8d6OlZ7TgLgnEhohzvySZqdzjR4_JUEutMWPs78eyDCj3zdMzMN8KGRqutHC1O4X8Myhh4OlC/s1600/angrybird2.jpg" width="204" height="181" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_ptoZdhSNG743adZghHQbFJvaMd5tusj3e70bSOlKUaWMQfirzORR_Z08yezQmScTixkbC9gYtK0DlfpMLnvE210dX04jNPkqzJU7dxX17Kgm-biHi-D0zDd1uT7dKdTj-4jwPB-3sRU/s1600/angrybird3.jpg" width="204" height="181" /><br /> <br /> </div>

Code

Example

Background Picture

Code	Example
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPfrhtUnb7FDbYVTQfmLYlrvEfAs3jzOHns11OK7uEfwW6eC7WDrnaXRjXw_iFvvNh5lqHtWVCOUuou62GvcUh59qZZ1u1biZYDyUW4XXd65XPfYfYcdtsMl0qwgssGaMdiHiYQ5iKaXr-/s1600/angrybird4.jpg); border: 1px solid black; height: 250px; overflow: scroll; width: 250px;"> <h3> Background Picture Box</h3> 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.</div>	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.

Code

Example

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

Code	Example
<div style="font-size:18px;color:black;border:1px solid black;width:150px;height:150px;overflow:scroll;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTYRmfTXsxcM6I5hqyW2qz_dut2rgn1k4YNsUV-DtL6FtDYa2xoL73GqmBWXb4mxMY3MZkuOoi6JShfzhoTfPi51H6Nhlvqw45YoAgIAVWj_2JUYi5srX4pRLiC1Q2LBpEUBPvY1jEFCl/s1600/angrybird5.jpg) 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>	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.

Code

Example

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.

Pages