Question

This is the image I’m talking about.

https://i.stack.imgur.com/WTkhd.jpg

Right now it works as a background of my news content. The brown area is the title, yellow are is the content.

When I write a long text into the content area, the text go out of the div because the picture isn’t big enough.

I want to split the image into 3 pieces.

1. Header
2. Middle
3. Footer

Header and footer will always be applied once. Middle has to repeat itself depending on how long the text is.

How can I achieve this in CSS?

PS: You may call the split images “header.png, middle.png. and footer.png”

Answer 1

HTML

<div id="parentDiv">
   <div id="header">
   </div>
   <div id="middle">
   </div>
   <div id="footer">
   </div>
</div>

Let’s say the Image has a width of 300px.

CSS

#header
{
     width:300px;
     height:100px;
     background-image: url("header.png");
     background-repeat: no-repeat;
}
#middle
{    width:300px;
     height:400px;
     background-image: url("middle.png");
     background-repeat: repeat-y;
     /*If the width will be bigger than the actual
       width of the image, then add:
       background-repeat: repeat-x;
     */
}
#footer
{
    width:300px;
    height:100px;
    background-image: url("footer.png");
    background-repeat: no-repeat;
}

More about background-repeat.

Note that the image will be repeated, which won’t look really good, I suggest that give the middle a fixed height, and use, overflow:auto; which will create a scrollbar when contents exceeds the size.