• 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

    • Get this massive 4TB WD_BLACK SN7100 SSD at a new all-time low price by Taras Buria Xbox owners recently received a new storage upgrade option, which allows them to equip the Xbox Series X|S with 4TB of extra space. That card, however, has an eye-watering price tag—nearly as much as the 1TB Xbox Series S. On the PC side, though, things are much better. Right now, if you need a 4TB SSD without selling a kidney, you can get the WD_BLACK SN7100 PCIe Gen4 SSD. It is now available on Amazon at a new all-time low price after a 16% discount (nearly half the cost of the new 4TB Xbox Storage Expansion Card). The SN7100 is a fast, reliable, and, more importantly, affordable Gen4 solid-state drive. Its speeds are rated up to 7,000MB/s sequential read and 6,700MB/s sequential write, while random input-output speeds are rated at 900K IOPS read and 1,350K IOPS write. These specs are not record-breaking, but they are fast enough for modern gaming (DirectStorage is supported), fast loading times in games and apps, and quick file transfer. The WD_BLACK SN7100 has a limited five-year warranty and endurance rating up to 2,400 TBW. You can monitor the health of your drive in the WD_Black Dashboard app on Windows. As for compatibility, you can use the SN7100 in any PC that accommodates M.2 2280 PCIe Gen4 drives, including PlayStation 5. It is compatible with PCIe Gen3 systems, but the maximum speeds will be limited. 4TB WD_BLACK SN7100 PCIe Gen4 Solid-State Drive - $249.99 | 16% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • Snagit 2025.2.0 by Razvan Serea Snagit is the most complete screen capture utility available. Showing someone exactly what you see on your screen is sometimes the quickest and clearest way to communicate. With Snagit, you can select anything on your screen – an area, image, article, Web page, or error message – and capture it. Then, save the screen capture to a file, send it to Snagit​'s editor to add professional effects, share it by e-mail, or drop it into PowerPoint®, Word®, or another favorite application. Capture and share images, text or video from your PC. Create beautiful presentations, flawless documentation and quickly save online content. The latest version of Snagit offers a totally new interface and workflow - making SnagIt easier for beginners to use, while still providing maximum convenience and flexibility for the screen capture experts. Snagit 2025.2.0 changelog: Edit Images from Camtasia Snagit can now be used to seamlessly edit images from Camtasia. Requires Camtasia version 2025.2.0 or later. In the Camtasia Media Bin, right-click an image and select the Edit in Snagit option. In Snagit, make your edits. When finished, click Send in the "Send changes to Camtasia" notification to replace the image on your Camtasia timeline. Step Capture Improved the Step Capture template to accommodate longer auto-populated step text. Annotations such as Callout or Arrow tool objects now anchor to and move with sections as sections are added to, reordered, or deleted from templates. Subscription Software Updated the Account dropdown to open automatically when new subscription related messages are present. Performance Improvements Improved the startup time for Snagit Capture application. Updates for IT Administrators Updated BouncyCastle.Cryptography package to address CVE-2024-29857 and CVE-2024-30172. Removed dependency on Xceed Zip. Updated LeadTools DLLs. Fixed an issue where Snagit might not recognize offline subscription activation. Fixed an issue where the video recording toolbar could be hidden from users when using Snagit in virtual environments or with remote desktop applications. Bug Fixes Fixed an issue where using Step Capture with the Share destination set to File in the Capture Window could result in data loss. Fixed a crash that could occur when capturing on some HDR monitors. Fixed an issue where the cursor object in a capture might include some of the background image in certain situations. Fixed an issue with the Box share destination to use the default browser for authentication. Fixed an issue where the Blur tool Color property could show when the blur or pixelate Type was selected. Fixed an issue where the privacy policy link in Snagit's installer might not open in the expected language. (PONRPD) Download: Snagit 64-bit | 419.0 MB (Shareware) Links: SnagIt Home Page | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Markdown's creator weighs in on rumored Apple Notes export feature by David Uzondu The rumor mill is churning as we draw closer to WWDC2025, and one of the interesting developments being discussed is a report from 9To5Mac that claimed Apple Notes in iOS 19 iOS 26, will finally get Markdown export capabilities. This caught the attention of many, including the person who actually invented Markdown. John Gruber, the creator of Markdown, shared his thoughts on this potential new feature on his weblog. For those who don't know, Markdown, which Gruber developed back in 2004 with significant input from Aaron Swartz (RIP!), is a lightweight markup language designed for creating formatted text using a plain text editor. Its main advantage is that it is easy to read and easy to write. When the news first broke, some interpretations suggested Apple Notes would gain full Markdown support, transforming it into an application where users could directly type and see Markdown syntax, much like how specialized editors like Obsidian operate. These tools are intended for users to work directly within the Markdown framework for all their note-taking. Gruber himself indicated that he does not believe Apple Notes should become a full-fledged "Markdown editor," even as an option. He stated that such a change would be a "huge mistake." His reasoning is rooted in his original vision for Markdown and his view of Apple Notes' purpose. He reiterated that he initially designed Markdown as a "text-to-HTML conversion tool for web writers" and for contexts requiring plain text file storage. He feels Apple Notes serves a different, valuable role with its current WYSIWYG (What You See Is What You Get) rich text editing. This interface, he argues, is excellent for quickly capturing thoughts, particularly on an iPhone, and aligns with the Macintosh philosophy of user-friendliness. He pointed out that creating a syntactically incorrect markdown is trivial, whereas a malformed note should not be possible with Apple Notes. Despite his reservations about a complete Markdown overhaul for the editing experience, Gruber finds the prospect of exporting notes in Markdown format very appealing. He wrote that this specific capability "sounds awesome." He pointed out, quite rightly, that Apple Notes' current export functions are rather limited, primarily offering PDF and Pages document formats. Adding Markdown export would provide a much more flexible way for users, especially those in the "niche" he identifies with, to move their content out of Notes and into other applications. Gruber did express curiosity about how Apple might handle images embedded in notes during a Markdown export, as image handling can be a tricky aspect of Markdown.
    • What? Every single app I've installed from the Microsoft Store comes from its intended developer and works perfectly fine. What apps do you install?
    • Microsoft Store is such a weird place filled with so much absolute garbage and with reputable apps that somehow come from questionable sources. Like, the app name is known, the images back it up but the publisher is just some weird name that's not mentioned for the apps we know.
  • Recent Achievements

    • Week One Done
      CHUNWEI earned a badge
      Week One Done
    • One Year In
      survivor303 earned a badge
      One Year In
    • 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
  • Popular Contributors

    1. 1
      +primortal
      419
    2. 2
      +FloatingFatMan
      182
    3. 3
      snowy owl
      181
    4. 4
      ATLien_0
      176
    5. 5
      Xenon
      139
  • Tell a friend

    Love Neowin? Tell a friend!