How to set a background to a div of variable height?

Question

Just finishing up my college project and I want to place a background image as the div background. The div is on the right hand side, the 'main content' area.

Where can I find a notebook type background image to simulate that the forms are in a textbook? Also, how can I account for variable height of the forms? Just stretch the image?

Any tutorials?

Answer 1

u can try css background-repeat property and make sure to create an image which can be repeated...

Answer 2

Actually you need two image, one image will repeat and make the background, the second image will stay on the right side or left or top or bottom whereever you like it...........to make it work you will need two divs, one outer and one inner..... here is the css for that to work

.blueout{width:650px;
margin-left:0;
margin-top:10px;
background:#fff url(images/repeated-background.gif) repeat-y left top;
padding-left:20px;
}
.bluein{
background:#fff url(images/corner1.jpg) right top no-repeat;
padding:1em 1em 1em 0;
}

and here is the html for it....

<div class="blueout">
<div class="bluein">

<p>some text here</p>

</div>
</div>

repeat-y means it will repeat towards y-axis (vertically) you can change it to horizontal it depends on your slice for background.....

Hope this helps....