/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Nov 26.2005

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 – [url]http://www.katherinejenkins.com[/url]

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 ?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonNov 26.2005 — It's just a fixed background image:body{
background:#ffffff url(someImage.jpg) no-repeat fixed top left;
}
Copy linkTweet thisAlerts:
@David_HarrisonNov 26.2005 — Oh wait, mis-read, thought you meant the girl. Well in that case just do something like this: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:<body><div id="body2">

</div></body>
Copy linkTweet thisAlerts:
@andrew_morshamauthorNov 26.2005 — 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.
Copy linkTweet thisAlerts:
@andrew_morshamauthorNov 26.2005 — ahh, I've figured it out. Thanks anyway.
Copy linkTweet thisAlerts:
@David_HarrisonNov 26.2005 — 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 [url=http://validator.w3.org/]W3C markup validator[/url], 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.
×

Success!

Help @andrew_morsham spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...