• 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

    • Raspberry Pi Imager 1.9.4 released bringing performance improvements, bug fixes and more by David Uzondu Raspberry Pi Imager 1.9.4 is now out, marking the first official release in its 1.9.x series. This application, for anyone new to it, is a tool from the Raspberry Pi Foundation. It first came out in March 2020. Its main job is to make getting an operating system onto a microSD card or USB drive for any Raspberry Pi computer super simple, even if you hate the command line. It handles downloading selected OS images and writing them correctly, cutting out several manual steps that used to trip people up, like finding the right image version or using complicated disk utility tools. This version brings solid user interface improvements for a smoother experience, involving internal tweaks that contribute to a more polished feel. Much work went into global accessibility, adding new Korean and Georgian translations. Updates also cover Chinese, German, Spanish, Italian, and many others. Naturally, a good number of bugs got squashed, including a fix for tricky long filename issues on Windows and an issue with the Escape key in the options popup. Changes specific to operating systems are also clear. Windows users get an installer using Inno Setup. Its program files, installer, and uninstaller are now signed for better Windows security. For macOS, .app file naming in .dmg packages is fixed, and building the software is more reliable. Linux users can now hide system drives from the destination list, a great way to prevent accidentally wiping your main computer drives. The Linux AppImage also disables Wayland support by default. The full list of changes is outlined below: Fixed minor errors in Simplified Chinese translation Updated translations for German, Catalan, Spanish, Slovak, Portuguese, Hebrew, Traditional Chinese, Italian, Korean, and Georgian Explicitly added --tree to lsblk to hide partitions from the top-level output CMake now displays the version as v1.9.1 Added support for quiet uninstallation on Windows Applied regex to match SSH public keys during OS customization Updated dependencies: libarchive (3.7.4 → 3.7.7 → 3.8.0) zlib (removed preconfigured header → updated to 1.4.1.1) cURL (8.8 → 8.11.0 → 8.13.0) nghttp2 (updated to 1.65.0) zstd (updated to 1.5.7) xz/liblzma (updated to 5.8.1) Windows-specific updates: Switched to Inno Setup for the installer Added code signing for binaries, installer, and uninstaller Enabled administrator privileges and NSIS removal support Fixed a bug causing incorrect saving of long filenames macOS-specific updates: Fixed .app naming in .dmg packages Improved build reliability and copyright Linux-specific updates: System drives are now hidden in destination popup Wayland support disabled in AppImage General UI/UX improvements: Fixed OptionsPopup not handling the Esc key Improved QML code structure, accessibility, and linting Made options popup modal Split main UI into component files Added a Style singleton and ImCloseButton component Internationalization (i18n): Made "Recommended" OS string translatable Made "gigabytes" translatable Packaging improvements: Custom AppImage build script with Qt detection Custom Qt build script with unprivileged mode Qt 6.9.0 included Dependencies migrated to FetchContent system Build system: CMake version bumped to 3.22 Various improvements and hardening applied Removed "Show password" checkbox in OS customization settings Reverted unneeded changes in long filename size calculation Internal refactoring and performance improvements in download and extract operations Added support for more archive formats via libarchive Lastly, it's worth noting that the system requirements have changed since version 1.9.0: macOS users will need version 11 or later; Windows users, Windows 10 or newer; Ubuntu users, version 22.04 or newer; and Debian users, Bookworm or later.
    • Ancient CD app makes 64-bit comeback to support Windows 11 and probably Windows 10 too by Sayan Sen Remember when CDs or compact discs were a thing? While technically, they still are, their popularity and usage have dropped immensely with the rise in other standards like USB, as the latter continues to evolve, getting faster and gaining more features. Recently, Microsoft enforced some mandatory requirements for USB Type-C so as to ensure a uniform and consistent experience for Windows 11 users. On the topic of Windows 11 and CDs, a CD ripping tool from the Windows 95/98 era, dubbed "CD2WAV32," is back again after 16 years (from the Windows 7 era). The utility has now been updated to work on Windows 11 version 24H2, which is pretty cool. This was not planned, says the author, as they simply wanted to test the app on their newly upgraded Windows 11 PC, but ended up going all the way to make it fully work on Windows 11. Their Windows 11 runs an AMD Ryzen 9600X, 64 GB RAM, and an Nvidia GT 1030 (miswritten as "GT1300"). The developer of the tool notes that they did not run thorough tests on Windows 10, but it works on their Atom-based PC, which is another relic, given how fast technology moves. The author writes (Google-translated from Japanese to English): "From now on, it will only support Windows 11 (24H2). The reason is that this is the only environment the author currently has. I haven't done anything particularly fancy, so I think it will work properly on Windows 10, but I can't guarantee it. All I have left is an ATOM machine that I bought a long time ago that also runs Windows 10, so I've seen that it works lightly on that, but I can't do a detailed test." Atom, for those wondering, was Intel's low-power CPU lineup that it decided to axe back in 2016. The story is similar to how Microsoft gave up on Windows Lumia, as Intel, too, abandoned its mobile chip ambitions once the likes of Qualcomm and MediaTek took over. In terms of the underlying changes, the utility has been compiled now on Delphi 12.1 Community Edition, which is used to make native Windows apps as well as ones for macOS, iOS, and Android. The recent update also brings a significant overhaul in terms of compatibility as well as UX/UI. File sizes and other such metadata are now handled using a 64-bit format instead of the prior 32-bit approach, eliminating overflow issues and ensuring large file and disk space values are displayed correctly. This change is necessary given that large storage volumes are quite common these days. Additionally, support for 16-bit code calling functions has been entirely removed as Windows 11 is 64-bit only; thus, features like MSCDEX and TwinVQ compression are gone. Meanwhile, the font has been changed from MSP Gothic 9pt to Meiryo 10pt, so readability should not be a problem even on 4K screens. In terms of audio file encoding support, it is said to work with MP3 as well as WMA. So, should you download and run it? Probably not, given that the UI is entirely Japanese, but it is still a fun project to look at.
    • Xbox has lots of games… and there all coming to Playstation!
    • Athena was the goddess of wisdom and war interesting choice
  • 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
      397
    2. 2
      +FloatingFatMan
      177
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!