[kensha]

Ever wondered how to expand the page when you add new content and content get´s out of the image?

Tutorial;
Step 1 setting up the background image and div.

#content{
background-image:url('images/content.png');
background-repeat:repeat-y;
width:630px;
min-height:399px;
max-height:600px;
}

The max height is optional but it is recommended.
To see the common mistake we another image under the element.
Because the bottom part has a rounded corner we had to slice it up into 2 images.


Step 2;
Now we create the next image.

#bottomcontent{
background-image:url('images/bottomcontent.png');
width:630px;
height:30px;
}

Now add these 2 divs behind each other and see the effect.
Hold on!


Question to me; Why is the bottom getting lose from the content when I add a <p></p> tag?
Answer;</p> Requires a few pixels downwards that's why the bottom get opened up.

If you consider not to use paragraph you don't need to follow step 3 but if you do then follow step 3.

Step 3;
Add come extra settings at the content div.
#content{
background-image:url('images/content.png');
background-repeat:repeat-y;
width:630px;
padding-top:5px;
padding-bottom:5px;
min-height:399px;
max-height:600px;
}

This should be good enough for the content to be expanded.
I hope you enjoy the function.

Don't forget whenever you creating some new css file.
Next to the body code you create first this code.
#{
background-image:url('images/');
width:;
height:;
}

Copy and pass it multiple times to save you up a load of retyping work;)

images used are in the attachment.

Attached File(s)

•  content.png (2.18K)
  Number of downloads: 6
•  bottomcontent.png (1.35K)
  Number of downloads: 6

This post has been edited by kensha: 16 January 2012 - 12:58 PM