• 0

CSS: Image fixed at top?


Question

I'm trying to modify a WordPress theme (The Morning After) and I have an image that is set to [repeat-x top] and I want it to stay fixed so that no other images will appear over top of it or replace it. Ideally I'd like to have any images I upload for the background show up below the bottom of image I want to have fixed.

Any help is greatly appreciated. My current CSS is below:

body { background: #f8f8f8 url(images/headers/top-bg.png) repeat-x top; }

Example below:

unledty.jpg

Link to comment
https://www.neowin.net/forum/topic/997584-css-image-fixed-at-top/
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Glen is right, you're going to need to fiddle with the z-index of both the body and the banner you're trying to keep fixed. The best thing to do is encase the banner in a div and create a background image inside that div.

The following should work:

body {
   background: url(whatever.jpg);
   z-index: 0;
}

#repeated-banner {
   background: url(repeated-banner-image.jpg) repeat-x;
   position: fixed;
   z-index: 1;
   height: 20px; /* Or however high you want it */
   width: 100%;
}

  • 0

Make a new Div, what you want to do isn't exactly possible, as the new background image you specify for the body will have to have some fake padding at the top. It won't automatically start below your banner.

#banner{
background: #f8f8f8 url(images/headers/top-bg.png) repeat-x top;
width : 100%;
height : 100px;
z-index : 10;
position : fixed;
top : 0px;
left : 0px;
}
body{
background: #f8f8f8 url(images/headers/top-NEWBACKGROUND.png) repeat-x 0px 100px;/*same PX as above*/
}

I haven't test this, I just wrote it out in the post editor. So check syntax if it goes wrong.

  • 0
  On 15/05/2011 at 21:02, lunamonkey said:

Do you want the second image to move when the user scrolls, or do you want it to be a fixed background?

Which of these is nearest? (ignore the file names)

http://lmky.co.uk/test/bottom-align-text-2.htm

http://lmky.co.uk/test/bottom-align-text.htm

http://lmky.co.uk/test/bottom-align-text-2.htm

That's essentially what I'm looking for. I want the top-bg image to span 100% width on the left and right of the header. Then I want a full bg image to start just below the to-bg, fixed. I'm just having a hard time getting both images to show up, let alone in the right places...

Again, i really appreciate the help guys.

  • 0
  On 15/05/2011 at 20:59, Elessar said:

Thanks for the input, CSS is definitely not my fort?. I've attached an image to the original post in hopes that it will help show just exactly what I'm trying to do. So far I've tried JAGFin1's code, no success yet though.

Right, I think I know what to do... I've just done a quick mock-up using background colours and Lorem Ipsum to test the scrolling and the position of the banner. This is the code I used:

<html>
   <head>
      <style type="text/css">
         body {
	    background-color: blue;
	    z-index: 0; /* Lowest index for the body and anything in it unless stated otherwise*/ 
	    margin: 0;
	 }

	 #scroll-header {
	    background-color: red;
	    position: fixed;
	    height: 200px;
	    width: 100%;
	    z-index: 1; /* Put it on top of the body */
	    top: 0; /* Make sure it is ALWAYS at the top */
	 }

	 #content {
	    margin-top: 200px; /* Content placed in this wrapper, with a top margin matching the height of the banner */
	}
      </style>
   </head>

   <body>
      <div id="scroll-header">
      </div>

      <div id="content">
         LOREM IPSUM WENT HERE.
      </div>
   </body>
</html>

The idea is to wrap all of the content on the page in a containing div as it gives you control over its position. The body is a BIG thing and you generally don't put raw content in it (without initially placing it inside another div). If you wrap all of your content in the #content div, you can make sure that it begins below the banner. When it scrolls, anything within the content div (with an index of 0) will scroll under it (because it has a lower index than the banner).

Give that a go and give me a shout if you have any problems, detailing what exactly went wrong. I understand that you're messing about with WP so it's a bit more difficult, but I've outlined the theory behind what you're trying to do.

  • 0

Whoa, that's a lot of code. So far I've been dabbling in the style.css, do I need to put the code above elsewhere? Like the header or something? If so, I'll need to be careful seeing as how this is a WP theme and messing something up in there could break the entire theme.

  • 0

I just added the code above to keep it together. I just looked at your example and can see what you're up to.

Basically, if you want to push the content of your page down so that it starts below the banner, you need to edit the CSS for the main container of content that WP uses. I'm sorry but I don't know what class that is, so you'll have to find it (or wrap all content in your own).

The basic principle relies on two things: the index of the banner, and the top-margin location of the content. If you look at my code, you'll see that #content has a top-margin: 200px. That matches the height of the banner, meaning that the content starts when the banner finishes. It's also important to make sure the banner has a top: 0; so that it explicitly starts at the top of the page.

The only thing you really need to be paying attention to is this:

#scroll-header {
   background: url(banner.jpg) repeat-x;
   position: fixed;
   height: 200px;
   width: 100%;
   z-index: 1; /* Put it on top of the body */
   top: 0; /* Make sure it is ALWAYS at the top */
}

#content {
   margin-top: 200px; /* Content placed in this wrapper, with a top margin matching the height of the banner */
}

It's no use relying on the body for moving content down as the banner is also part of the body, which encases everything on a web page. Like lunamonkey stated, you need to use divs in order to fix the positions of the conflicting objects.

Edit: I've just realised that lunamonkey has used a slightly different method to me. Swings and roundabouts I suppose.

  • 0

See, the problem is the ONLY thing I want to push below the top-bg is the background image. With what you posted above it sounds like I'll be pushing EVERYTHING content-wise below the top-bg which will throw everything that is currently in the header completely off...right? Is there anyway to use two images for the bg within the CSS, instead of hacking WP? I want to make sure upgrading WP for security fixes is as painless as possible.

  • 0

So, you're saying that you want the background image of the body to appear at a lower top-margin to the actual content of the body? Erm...

You'll probably want something like:

body {
   background: url(img.jpg) 0px 200px repeat-x;
}

That will repeat the background across the x-axis, and place it 200px from the top of the container.

You'll have to excuse the ambiguity, I'm quite tired!

  • 0
  On 15/05/2011 at 21:53, JAGFin1 said:

So, you're saying that you want the background image of the body to appear at a lower top-margin to the actual content of the body? Erm...

You'll probably want something like:

body {
   background: url(img.jpg) 0px 200px repeat-x;
}

That will repeat the background across the x-axis, and place it 200px from the top of the container.

You'll have to excuse the ambiguity, I'm quite tired!

No excuse needed, I'm extremely appreciative that people are taking the time to try and help a newb :)

  • 0
  On 15/05/2011 at 21:49, Elessar said:

Is there anyway to use two images for the bg within the CSS, instead of hacking WP? I want to make sure upgrading WP for security fixes is as painless as possible.

wordpress upgrades don't touch the themes. You can hack the themes all you like. As long as wordpress don't change the engine completely, but then that would break all themes.

  • 0

I was under the impression I'd have to hack a few of the WP files. So far no luck, granted I'm in no way a coder. Right now I'm trying to figure out how to make the background image work along side the top-bg image that spans the top of the page...all in CSS.

Now, one question I do have is the 'Background' option under Appearance in WP...where would I edit that file? Surely that is within the WP files themselves and not the theme, making me question if I could set some attributes there to make the background image I upload show up below any other images from the theme(s)...

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • The Bromance is definitely over! 🤣🤣🤣
    • I have the chance to live where electricity comes only from dams.
    • Which doesn't give them a pass for making the same game with a different skin
    • End of 10: Upgrade to Windows 11 Home or Pro for only $14.97 by Steven Parker Microsoft has been reminding users about the upcoming end of support for Windows 10 that is inbound in less than four months. In the reminder, Microsoft has highlighted ways to deal with the event, covering both scenarios depending on whether your system is eligible for a Windows 11 upgrade or not. If you are in the latter camp, then Microsoft wants you to buy a new Windows 11 PC and that is something the tech giant has repeated time and again, even as recently as this past month in the context of Copilot+ AI PCs. It has also provided some data to back up claims of huge performance and productivity boost, albeit citing a paid study. However, if you are like me and don't plan to buy a CoPilot+ PC, and you have hardware that is eligible for Windows 11 (without bypasses) and if you are locked out of the free upgrade path, you can score a Windows 11 license for very little. Description follows: Upgrade your computing experience with Windows 11 Pro. This cutting-edge operating system boasts a sleek new design and advanced tools to help you work faster and smarter. From creative projects to gaming and beyond, Windows 11 delivers the power and flexibility you need to achieve your goals. With a focus on productivity, the new features are easy to learn and use, enhancing your workflow and efficiency. Whether you're a student, professional, gamer, or creative, Windows 11 Home has everything you need to take your productivity to the next level. New interface. easier on the eyes & easier to use Biometrics login*.Encrypted authentication & advanced antivirus defenses DirectX 12 Ultimate. Play the latest games with graphics that rival reality. DirectX 12 Ultimate comes ready to maximize your hardware* Screen space. Snap layouts, desktops & seamless redocking Widgets. Stay up-to-date with the content you love & the new you care about Microsoft Teams. Stay in touch with friends and family with Microsoft Teams, which can be seamlessly integrated into your taskbar** Wake & lock. Automatically wake up when you approach and lock when you leave Smart App Control. Provides a layer of security by only permitting apps with good reputations to be installed Windows Studio Effects. Designed with Background Blur, Eye Contact, Voice Focus, & Automatic Framing Touchscreen. For a true mouse-less or keyboard-less experience TPM 2.0. Helps prevent unwanted tampering Windows 11 Pro also includes a number of productivity-focused features, such as the ability to snap multiple windows together and create custom layouts, improved voice typing, and a new, more powerful search experience. Personal and professional users will enjoy a modern and secure computing experience, with improved performance and productivity features to help users get more done. Only on Windows 11 Pro If you require enterprise-oriented features for your daily professional tasks, then Windows 11 Pro is a better option. Set up with a local account (only when set up for work or school) Join Active Directory/Azure AD Hyper-V Windows Sandbox Microsoft Remote Desktop BitLocker device encryption Windows Information Protection Mobile device management (MDM) Group Policy Enterprise State Roaming with Azure Assigned Access Dynamic Provisioning Windows Update for Business Kiosk mode Maximum RAM: 2TB Maximum no. of CPUs: 2 Maximum no. of CPU cores: 128 Good to know This license is for Windows 11 only. It is NOT intended to be used for upgrading Microsoft Office (MSO) included in Parallels Pro. However, it will still work with Parallels Pro and allow you to run Windows applications including MSO, but it DOES NOT include an upgrade MSO itself. It is still compatible with Microsoft Office ONLY if you have a separate license for it. Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Max number of device(s): 1 Version: Windows 11 Pro Updates included Click here to verify Microsoft partnership For example, a Microsoft Windows 11 Pro license normally costs $199, but you can pick it up for just $14.97 for a limited time, that represents a saving of $184. For a full description, specs, and license info, click the link below. Get Windows 11 Home or Pro for just $14.97 See all discounted Neowin Deals on offer. This is a time-limited deal. Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      409
    2. 2
      +FloatingFatMan
      181
    3. 3
      snowy owl
      177
    4. 4
      ATLien_0
      172
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!