ansaurus

Question

3 divs as background

Answer 1

+2 A:

<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.

N 1.1 2010-03-31 13:57:21

-1. I think he wants the content to be in one div that spans the whole background, without having to separate content into the different div's

David Andersson 2010-03-31 14:03:06

@David: the first method is a little hackish (top and bottom would be mostly static and the text would always go to the middle div.)

N 1.1 2010-03-31 14:04:38

@David I think the 3 div solution is the easiest to implement and will provide the functionality the OP is looking for.

Seth M. 2010-03-31 14:09:54

funny how the answer with highest votes is same as mine, but i get the -1 votes :D. oh! i know why, i didn't spoon feed.

N 1.1 2010-03-31 14:17:20

@nvl, @Seth M: Removed my -1 (what's the point, all the other ones come with the same hackish suggestion). Were CSS3 an option, I would definitely go for your suggestion.

David Andersson 2010-03-31 14:28:34

Answer 2

+3 A:

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

Salil 2010-03-31 14:02:52

This works, but I would add specific height specs to the CSS on the top and bottom elements.

swt83 2010-03-31 14:15:07

Answer 3

A:

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.

Seth M. 2010-03-31 14:05:36

Answer 4

A:

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.

Adam Kiss 2010-03-31 14:10:09

Answer 5

A:

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

then it will work properly.

Abhishek 2010-03-31 14:10:19

I was assuming the OP could figure out the heights.

Seth M. 2010-03-31 18:01:58

Answer 6

A:

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.

Tor Valamo 2010-03-31 14:10:43

Answer 7

A:

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>

o.k.w 2010-03-31 14:11:43

ansaurus

tags:

views:

answers:

3 divs as background

my solution:

related questions