Question

I've been working on this for a couple of hours and can't seem to wrap my head around it. I have three images, below, and I would like the text content to sit on top of these, but how do I do it?
The middle image is the image that would need to repeat as the container div expands.

Okay, I do apologise for my lack of information, it's a little late and I'm not exactly thinking straight. I would like to comprise a container with all three images. The minimum height of this container would be the top and bottom image. As contents starts to overflow this minimum height, the middle image would start to repeat to accommodate for more height.

Top: alt text http://files.droplr.com/files/45544730/INDf3.Page.png

Middle repeating: alt text http://files.droplr.com/files/45544730/INE5i.Page-Tile.png

Bottom: alt text http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png

Was it helpful?

Solution

my solution:

I usually do it like this:

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

css:

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

usually, bottom of div is so small it's ok to leave it blank (to add spacing to whole design). Also, negative margin-bottom size should be : -(height - what_you_want_to_remain_empty) - i.e. if your .box .header image has 540px and you want to leave top 50px empty, you'll set -490px as I had.

Good luck.

OTHER TIPS

TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

Give class instead and handle it in your stylesheets

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

Give each div seperate background CSS styling.

But I would suggest,
Give background styling to the text div, along with box-shadow and border.
In this case, you will need only the middle image.

Having the code so far would be helpful, but I will give it a whirl.

You are going to need a container for each image.

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

--css--

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

I would probably want to make the first image about the same size as the last image and let the 2nd image fill in as needed.

i think in Seth M's answer, you need to provide height for top(head) & bottom(foot) div.

then it will work properly.

div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

It's a neat thing, which puts the top and bottom pics as images inside the box, but always first and last. Of course it doesn't work if you have margins or paddings, but try doing this too:

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

That should give you exactly what you want, in a sort of weird way. Beware that older browsers won't support these CSS rules.

Here's a ful code with HTML/CSS using the images you posted. The header portion is rather 'tall'. I assume it's part of your design.

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top