I have problems with a layout/design I just received, which you can see here. The thing I can’t figure how to do is the overlay (the words ZAFIRIS TOURS) at the top of the page. Right now I have it as a image (2648px x 95px) and as you can see should it extent over the width of the screen without having a vertical scrollbar. What would be the best way to do this?

Thank you in advance.

I’d just put it in a 100% wide div as a centred background-images with a min-width equal to the main layout width. Inside that 100% wide div put another fixed width div equal to the width of the layout and place your logo and header stuff.

Then just continue with a normal centred page layout.

The page background shadows and white section could be repeated on the body for the 100% height effect as the 1px background jog shouldn’t really be an issue here as there is some white space to soak it up.

The footer would probably be best as a sticky footer if you don’t want it rising up on small pages but would be a little more complicated as you have to account for the 100% wide header being outside the min-height 100% high outer and would need to be compensated with more negative margins.

Hi Paul. I have indeed the background on the body with repeat-y. But i’m indeed after the sticky footer. So what are my options here?

Thank you

This is an old example so excuse the transitional doctype but looks more or less like what you need to do.

It has a wide header and then the outer is dragger up underneath with a negative margin to match the header and footer height and then follows the usualy sticky footer rules.

Brilliant. Thanks a lot.


I saw this post last night but was too sleepy to answer right away. Maybe I missed the point, but I thought that the goal was to have a darker “zafiri” over the lighter “zafiri”… as in an overlay. I was going to suggest that this as a job for background-attachment:fixed;background-position:center;

So for example you would put the lighter image in body{} and the darker in #pageWrap{}. this way the overlay effect would be fluid.

Just an alternate solution… :slight_smile:

If I understand what you meant I don’t think fixed would work in this scenario Ray as the page would scroll but the background text would not and then would overlay the rest of the page. Or did I misunderstand :slight_smile:

Hi Ray and Paul. The method Paul gave me is working, but as Ray very well noticed is there a darker part in the overlay. As I have it now it is just one image. Before Paul suggested the sticky footer method (post #4), I had the image as background in a absolute positioned div inside the 100% wrapper:

#container {
	width: 100%;
	min-height: 100%;
	z-index: 1;
	overflow: hidden;
	font-size: .75em;

#overlay {
	width: 2448px;
	height: 95px;
	min-height: 95px;
	position: absolute;
	top: 25px;
	left: 50%;
	margin-left: -1324px;
	background: url(../images/site/headline.png) no-repeat;
	z-index: 100;

This gave the result as in the example, but wasn’t sure if that would work out with the sticky footer. So my question now is, if there is a way, following Paul’s sticky footer method, but that I still can center that image so that the dark part will show as in the example in post #1

Thank you both in advance.


I don’t see a problem as you just center the background image (background-position:50% 0) and it will stay with the layout as one image. You don’t need two overlays just do it all as one image.

Do you have a live example to look at as it will be easier to understand the problem?

Paul beats me to the punch again. And He was right, the background attachment will cause problems, on scroll ( for some reason I thought I had used this method for a similar problem… but in fact it was for a fixed top menu… blah).

You don’t have to use (background-position:50% 0) , tho that is the easiest method.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<style type="text/css">
			html, body{ padding:0; margin: 0; height:100%}
			p {margin:0; padding:0}
			body{ background: url(sample.png) center 0 repeat-x tan; }
			#page  { width:60%; margin:0 auto; min-height: 100%; background: #fff; border-left:5px solid brown; border-right:5px solid brown;}
			#page .overlay  { height:200px; background:url(sample2.png) center 0 repeat-x #fff ;  }
			#content {padding-bottom:200px; margin-bottom: -200px}
			#fut {background: orange; height:200px; width:60%;border-left:5px solid brown; border-right:5px solid brown; margin:0 auto }
		<div id="page">
		 	<div class="overlay"></div>
		 	<div id="content">
				<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<div id="fut">Dude, why is my foot so sticky? </div>

Here I used two 550x100px transparent graphics of the word “sample” .

I was toying with the idea of not having to center/50% the images so that they line up. ( so the overlay would always begin with the left edge of the word). This is proving to be mathematically challenging, as background images don’t align on their left edges for % values other than 0%.

Anyway, the code above includes an adaptation of the sticky foot to work with this method.