IMAGE

Style Property Reference v1.0

+ Background Image

Background of an element
(i.e. the surface onto which the content (e.g. text) is rendered)

Sample background image (back.gif) --->

{background: URL(#) } #=image-url 

<DIV SIZE=5 STYLE="background: URL(back.gif)">
Today is fine.
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</DIV>






Today is fine.
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.

+ Background Repeat

{background: URL(image-url) # }
#=repeat, no-repeat, repeat-x, repeat-y 

<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) repeat">
<TR><TD>
Today is fine.
</TABLE>
Today is fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) no-repeat">
....
Today is fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) repeat-x">
....
Today is fine.
Tommorow will be fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) repeat-y">
....
Today is fine.


+ Background Scroll

{background: URL(image-url) # }
#=fixed, scroll

This is same as <background src=url fixed> 

<BODY STYLE="background: URL(back.gif) fixed">
....

+ Background Position

{background: URL(image-url) #1 #2}
#1=%, left, center, right
#2=%, top, middle, bottom 

<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) no-repeat 50% 50%">
<TR><TD>
Today is fine.
</TABLE>
Today is fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) no-repeat left bottom">
...
Today is fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) no-repeat center middle">
...
Today is fine. 




<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background: URL(back.gif) no-repeat right top">
...
Today is fine.




NCD HOME Font || Text || Color || Image
Style Property Reference
Style Sheet Guide
HTML Design Guide Main Page


Network Communication Design
http://ncdesign.kyushu-id.ac.jp/
C&P 1994-1996 Yuriko Ienaga v91102@vgenda.kyushu-id.ac.jp