How can I replicate this effect? - http://www.katherinejenkins.com

**andrew_morsham** · 11-26-2005 08:23 AM

Hello beautiful people. I'm new to this web-site but I love it already. However I'm in the grip of frustration. I'm building a site for a DJ and I want the main body page of the frameset to contain a fixed image at the top that stays exactly where it is even when you scroll the page, yet which remains within the page itself, parallell to the top of the scroll bar.

Go here to see what I'm talking about - http://www.katherinejenkins.com

As you can see the decorative metal section at the top of the main body section is above the rest of the page. I know how to do that, it's simply the positioning it adopts. I just can't crack it.

Any help would be fantastic...

-Andrew

**David Harrison** · 11-26-2005 08:39 AM

It's just a fixed background image:

Code:

body{
  background:#ffffff url(someImage.jpg) no-repeat fixed top left;
}

**David Harrison** · 11-26-2005 08:42 AM

Oh wait, mis-read, thought you meant the girl. Well in that case just do something like this:

Code:

body{
  background:#ffffff url(someImage.jpg) no-repeat fixed top left;
  padding:0;
  margin:0;
}

#body2{
  background:url(someOtherImage.jpg) no-repeat fixed top center;
  padding:10px;
}

And then have some HTML like this:

Code:

<body><div id="body2">

</div></body>

**andrew_morsham** · 11-26-2005 10:51 AM

Still doesn't seem to be working. I've even uploaded it onto a server and still nothing. Here is what I have -

___________________________________________________

<head>
<title>Untitled Document</title>
</head>
<style>
body{
padding:0;
margin:0;
}

#body2{
background:url(background.jpg) no-repeat fixed top center;
padding:10px;
}
</style>
<body><div id="body2">

</div>
</body>
</html>

____________________________________________________

I've beens snooping around the example I provided and it looks like they utilise css sheets from another folder.

**andrew_morsham** · 11-26-2005 01:15 PM

ahh, I've figured it out. Thanks anyway.

**David Harrison** · 11-26-2005 01:51 PM

Well the code you posted worked fine, so I'm not sure what the problem was. However, I've just got a few pointers.

Always use a DOCTYPE, it puts the browsers into standards compliance mode, which is far better than quirks mode (especially in the case of IE).

Generally all styles go in the head section of the page, though I guess there's nothing to stop you putting them in the body section.

If you only have one image that you want to stay at the top of the page then you may aswell use the first example I posted, and set it as the background to the body element.

This point is key, always run your code through the W3C markup validator, if you've got any errors then it's definately worth fixing them.

Also, what I didn't mention earlier is that if you don't want the content to over-lap the image, you can specify some top-padding.

Thread: How can I replicate this effect? - http://www.katherinejenkins.com

Thread Tools

Display

How can I replicate this effect? - http://www.katherinejenkins.com

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions