I've added a scrollbar to this DIV by giving the DIV a set height and then putting content in the DIV that exceeds that height and setting the overflow property to "auto"

 

 

 

 

That was so you could see how a background image behaves when placed in a scrolling element. Go ahead and scroll to see.

This is how I specifed the placement:

background: #24668D url(dig499_01/images/small_wave.jpg) no-repeat 2px 140px;

 

 

 

 

 

 

 

 

 

 

 

 

 

I put this text down here so you could see the effect of scrolling over a "fixed" image

< DIG 499.01 & < DIG 499.02 > Resources >Demo: Images

the background image on the body of this page is pattern_126.gif from http://squidfingers.com/patterns

You could experiment making your own nice repeatable graphic. But there are many available on the Web. Most of them are kind of ugly or cheesy. I like the ones by squidfingers.

by default when you set a background image the default style is repeat. If you want it not to repeat (appears one time)—make the declaration background-repeat: no-repeat;

If you want to repeat the image on the x-axis only (this would be good for a top bordering repeating image)—make the declaration background-repeat: repeat-x; And, as you can guess, a repeat-y value tells the background image to repeat on the y-axis or vertically.

I've applied a x-repeating background to just this DIV. When I hand code this I group my background values like so:

#main {background: #FFF url(dig499_01/images/pattern_029.gif) repeat-x;

this translates as: make the main DIV a white background with an image that repeats across the horizontal axis or x-axis.

Try another background grouped declaration. I used it here on navbar (left column).

the whale is a foreground image

whale