Topic: Any idea how I could lay this out....

I've got 3 images:
- background cardboard
- cardboard clouds
- bottom sunburst

These would ideally be a great "bg.jpg" but I need the clouds and cardboard bg to repeat and the sunburst not to repeat and be bottom center.

Right now I've combined the clouds and the cardboard and made:
http://jbirdmedia.org/projects/engage/images/bg.jpg

And I have:
http://jbirdmedia.org/projects/engage/i … nburst.jpg

You can see what I'm going for here:
http://jbirdmedia.org/projects/engage/webpic.jpg

And this is what I currently have but can't figure out to incorporate the sunburst.
http://jbirdmedia.org/projects/engage

Any Ideas?

Re: Any idea how I could lay this out....

You could try using transparent PNG's for the clouds and the sunburst and then use something like SuperSleight (or similar PNG fix) to compensate for IE6's lack of PNG transparency.

Transparent PNGs in Internet Explorer 6

Hope that helps.

Exercise your faith!

Re: Any idea how I could lay this out....

My bad let me explain a little further. I don't have a transperancy problem. I need to know how to make these 3 images work for my "bg.jpg" while the clouds and sky repeat, but the sunburst doesn't.

I can't put the sunburst as the background to any other "div" because I need it to always be at the bottom center of the page.

Any ideas?

Re: Any idea how I could lay this out....

Could you try giving body a height of 100%, then creating a div outside of "wrapper" and giving that a width of whatever the sunburst is (sans background, transparent PNG with a PNG fix), margin: 0 auto;, and a height of 100%, and aligning the background to bottom center?

Re: Any idea how I could lay this out....

That's close, but the problem is it just puts the sunburst at the bottom of the 'div' and not the page. In other words it only goes to the bottom of the' wrapper' content.

Here is my code

That's close, but the problem is it just puts the sunburst at the bottom of the 'div' and not the page. In other words it only goes to the bottom of the' wrapper' content.

Here is my code

body {
background: url('images/bg.jpg');
margin:0;
padding: 0;
height: 100%;
}

.sunburst {
width: 1280px;
height: 100%;
background: url('images/sunburst.jpg') no-repeat;
background-position:bottom center;
margin: 0 auto;
}

.wrapper {
width:960px;
margin: 0px auto;
}

.twitter {
width: 295px;
height: 128px;
margin-left: 560px;
margin-top: 5px;
}


.video {
width: 530px;
height: 305px;
background: #000;
border: #fcfcfc 8px solid;
margin: 0 auto;
margin-top: 40px;
}

.logo {
width: 570px;
margin: 25px auto;
}

Last edited by jasonathopi (2009-07-23 08:46:05)

Re: Any idea how I could lay this out....

Hrm, putting position: fixed; on the sunburst div makes it snap to the bottom, but then screws up the centering. But maybe playing around with that would help?

Re: Any idea how I could lay this out....

You might also try checking out sticky CSS footers, something like: http://ryanfait.com/sticky-footer/