Hi,
We need to create a content area DIV(s) with a fixed width and variable height. This will have a background image with a unique top & bottom (rough brush-stroke edges), and a tiled middle so it can be any height.
I know how to do typical techniques using usually 1 to 3 DIVs with the separate images in each (top/middle/bottom). But our problem is that the content will need to overlap the top image, while most of these techniques have the content inside the ‘middle’ area only.
I know we can also combine the top image with an overly tall middle image, apply that to the main content DIV without tiling, and then cap it on the bottom with the bottom image. We’re actually doing that on a lot of smaller elements. But this is the main content area and could get really tall. So I would prefer to use a tiling background so it doesn’t get unruly.
I thought about negative top-margin for the middle area, but the background images cannot overlap, as they are all semi-translucent. So you would see the overlap.
That’s cool, thanks. Forgot to say, though, that it needs to work for the majority of the people who would view it (i.e., IE). Good to know about this, though, for future reference.
I suggest that you make a long image with the special top and the background for the content (verry long image) .
an Make another image for the footer of the thing.
Then make a DIV for header and content (1 div)
And make a DIV for the footer to show the footer image
that should work in all browses I guess.
(You might want to check the pseudo CSS selectors :before and :after, I don’t know what older browsers do/do not suport it)
Hi. Easy. You need four divs. #main will hold the repeating image. Then nest all the other divs in the #main. #top holds the top image. #bot holds the bottom image. And Content just holds the padding for the content.
Gar onn: That’s how we’ll probably end up doing it if we can’t figure anything else out. I was just hoping to avoid the huge graphic if possible. But it’s always an option.
EricWatson: That would work if the images were opaque. Unfortunately, they are all semi-translucent, so the top & bottom images would not ‘block-out’ the repeating middle images.
I had a feeling this would be tough, but just thought I might be missing something.
if its translucent… what is showing through? There will always be a BG of something showing through… even if it is white from the original page( I cant get translucent fade out of my head… so maybe am visualizing this wrong…) thinking about it more … I think you mean the OUTSIDE ( top/bottom) edges is where the transparency begins… right?
w/o CSS3 you need at least one element per bg image… no way around that. Remember tho that you can use j/s to support IE ( PIE comes to mind)… tho maybe , since you need transparency on the OUTSIDE edges… then border-image might be the property you should be thinking of.
back to CSS2.1… padding may not work , as the image is repeated in the padded area as well
<div class="cont"><div class="top"></div>
blah.. blahhh
<div class="bottom"></div></div>
.cont{ margin-top: AT LEAST height of top image; margin-bottom AT LEAST height of bottom image; position:relative; background:url(centerimage.png)}
.bottom, .top{position:absolute; width:100%; }
.top{bottom:100%;background:url(topimage.png) repeat-x bottom left}
.bottom{top:100%; background:url(bottomimage.png) repeat-x top left}
you could also achieve the same thing with negative margins on .top and .bottom and .conatiner … but the math is harder to explain, it doesn’t work if container has a border or padding ( since it utilizes margin collapse for effect) and you have to take into elements that may surround .container.
Assuming the header and footer were fixed heights then I would do it with 3 separate divs for header, content and footer and then nest an inner div in the content section and drag its top and bottom over the header and footer with a negative margin similar (but not quite the same) as this example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
body {
background:blue;
padding:20px 0;
}
#header, #content, #footer {
width:60%;
background:red;
margin:auto;
height:100px;
border:1px solid #000;
}
#header {
border-bottom:none;
}
#content {
height:auto;
border-top:none;
border-bottom:none;
background:yellow;
padding:1px 0;
}
#footer {
background:green;
border-top:none;
}
#inner {
margin:-100px 0;
position:relative;
padding:0 10px
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet vulputate imperdiet. Pellentesque quis tincidunt libero. Sed mollis commodo ligula, vel tincidunt metus feugiat a. Aenean id sollicitudin nisl. Mauris quis tortor augue, quis congue tellus. Morbi a varius libero. Praesent a felis quis ligula pellentesque dignissim nec ornare augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vestibulum convallis risus, nec auctor justo accumsan ut. Suspendisse vel elit nec ipsum adipiscing commodo at at neque. Mauris et risus odio. Donec orci turpis, convallis id auctor at, feugiat in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eu diam in purus tincidunt auctor a sit amet diam. Fusce fringilla viverra augue. Sed orci augue, convallis ut iaculis in, sodales ac mauris. Sed a hendrerit libero. Proin leo elit, rhoncus in iaculis nec, pharetra eget sem. In viverra metus quis enim facilisis venenatis. Suspendisse potenti. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet vulputate imperdiet. Pellentesque quis tincidunt libero. Sed mollis commodo ligula, vel tincidunt metus feugiat a. Aenean id sollicitudin nisl. Mauris quis tortor augue, quis congue tellus. Morbi a varius libero. Praesent a felis quis ligula pellentesque dignissim nec ornare augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vestibulum convallis risus, nec auctor justo accumsan ut. Suspendisse vel elit nec ipsum adipiscing commodo at at neque. Mauris et risus odio. Donec orci turpis, convallis id auctor at, feugiat in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eu diam in purus tincidunt auctor a sit amet diam. Fusce fringilla viverra augue. Sed orci augue, convallis ut iaculis in, sodales ac mauris. Sed a hendrerit libero. Proin leo elit, rhoncus in iaculis nec, pharetra eget sem. In viverra metus quis enim facilisis venenatis. Suspendisse potenti. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet vulputate imperdiet. Pellentesque quis tincidunt libero. Sed mollis commodo ligula, vel tincidunt metus feugiat a. Aenean id sollicitudin nisl. Mauris quis tortor augue, quis congue tellus. Morbi a varius libero. Praesent a felis quis ligula pellentesque dignissim nec ornare augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vestibulum convallis risus, nec auctor justo accumsan ut. Suspendisse vel elit nec ipsum adipiscing commodo at at neque. Mauris et risus odio. Donec orci turpis, convallis id auctor at, feugiat in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eu diam in purus tincidunt auctor a sit amet diam. Fusce fringilla viverra augue. Sed orci augue, convallis ut iaculis in, sodales ac mauris. Sed a hendrerit libero. Proin leo elit, rhoncus in iaculis nec, pharetra eget sem. In viverra metus quis enim facilisis venenatis. Suspendisse potenti. </p>
</div>
</div>
<div id="footer"></div>
</body>
</html>
WOW you guys are making something simple needlessly complicated… Well, unless transparency is involved in which case don’t involve transparency. Usually that’s easy enough to fake… much less NONE of the solutions so far do what he’s asking – overlapping the content over all three images… so the answer is NESTING instead of SIBLING.
#tiledBackground {
background:url(images/tile.png) top center repeat;
}
#bottomBorder {
background:url(images/bottomBorder.png) bottom center no-repeat;
}
#topBorder {
min-height:256px;
/*
min-height== height of top and bottom border added together
so they don't overlap each-other and show completely
*/
background:url(images/topBorder.png) top center no-repeat;
}
* html #topBorder {
/*
IE6- knows not the min-height, but incorrectly
treats height as such.
*/
height:256px;
}
About all there is to it… simple. You put the tile back-most, then put the top and bottom over it to hide it.
Though could we SEE the images involved? ALL the posts so far are wild guesses without seeing EXACTLY what you are trying to do… is there transparency? Are the top and bottom images also tiled on the X or are they fixed? Is this a fixed or fluid layout?
But then, I’m a non-euclidean thinker; A question always begs more questions, not answers.
Possibly because there’s no consistent name for it – I say transparency, some people say translucency, some say opacity… They’re all the same thing, but it’s easy to miss.
Still, I’d probably NOT do transparency and instead fake the appearance, but I’d have to see the images in question to say for sure. I have rarely seen times where it was actually necessary to a layout… and the handful of times when it was, 99% of the time I told people to lose the concept as not worth the effort… usually because in those cases each of the image files involved were by themselves larger than I’d allow for a single page on a website (that’s images + CSS + markup + scripts… which for me I usually have a 70k target and a 140k max)
Hey everyone,
Thanks for all the replies. I really appreciate the thinking!
Sorry if I wasn’t more clear on the transparency issue of the background images. But I think Paul O’B is on the right track. I just hadn’t thought about putting the content in a DIV that wasn’t used for one of the background images. Thanks!
And just for the sake of clarity, the background images of these DIVs are basically large solid areas of color that are not completely opaque (maybe 70%-90% opacity - think very thin or tracing paper). This allows the overall page background tile, which is a canvas texture, to show through a bit on these elements. The tops and bottoms, however, have rough edges, so there are parts outside the edges that are completely transparent as well.
And for Jason, I understand about not wanting to make pages too overly heavy or complicated. But this client demanded a very organic looking site, so we had to get ‘creative’. I was able, however, to combine all of the background images (about 30+) that will be used on the home page (and some others) into a single sprite that is only 100k. And all of the elements have semi-transparency and even soft drop-shadows/glows. This way, they can all pick up a bit of the texture from our canvas background. The trick was using Fireworks’ unique ability to save 8-bit PNGs with full alpha transparency.
But thanks again! I always know I can find someone on these forums who can help me think a little ‘outside the box’ or sometimes even discover the obvious.
Given that within a 50 mile radius of where I live eight towns still lack broadband, over two-thirds the population is still on 768kbps or less.
… and it’s not just about the user; it’s about the SERVER too. No need to strain the server for nothing – especially since even a 1gbps connect can be strained down to 1mpbs max throughput by a thousand users online at once… much less the 100mbps most unmetered servers are on… or the people hosting on shared servers who are going to hit their bandwidth limit or get kicked off for excessive use.
There’s a reason I consider 70k ideal and 140k the upper limit of what I’d allow for a single page template (HTML+CSS+IMAGES+SCRIPT) excepting perhaps things like image galleries (which would inherently be larger) – though I am THINKING about upping that to 80/160 to reflect the slow increase in available bandwidth. (JUST as I start to allow things like CSS3 in my code cutting the size of many of my page designs in HALF)
100k still sounds large to me just for images, but if the rest of the page is lean that’s no big deal I guess… If you have as much .js as your do images, time for one or the other to get the axe – of course if you’re dealing with a client who doesn’t grasp the realities of deploying a real website; combined with some nonsense layout tossed together by a PSD jockey you are struggling to shoe-horn content into without breaking it… You’re up the creek.
