www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Nov 2005
    Posts
    3

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

    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

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    It's just a fixed background image:
    Code:
    body{
      background:#ffffff url(someImage.jpg) no-repeat fixed top left;
    }
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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>
    Every fight is a food fight when you’re a cannibal.

  4. #4
    Join Date
    Nov 2005
    Posts
    3
    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.

  5. #5
    Join Date
    Nov 2005
    Posts
    3
    ahh, I've figured it out. Thanks anyway.

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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.
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles