• 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

    • I don't care about browser benchmarks. It's loads pages nearly instantly and doesn't really feel slow at all to me. Anyway I care more about features and stability and so far I'm satisfied. Plus I wouldn't use Edge if Microsoft paid me.
    • And the big problem we have seen with government organizations is the incredibly slow accountability. In the private space, the need to turn a profit forces the issue. That may not always be healthy, but it is swift. The best working example of a government organization is the USPS, but that is in part because it was created to operate like a business, with its own budget and revenue. That model may not work in every case, for example, I wouldn't want law enforcement under pressure to find revenue, but in some cases it does work.
    • Hell Let Loose, and A Little to the Left, and more join Xbox Free Play Days this weekend by Pulasthi Ariyasinghe Microsoft lets every Game Pass subscriber jump into fresh games every weekend for no extra cost, and it's time for another bunch of games to join the fray. The latest update offers Xbox Game Pass Ultimate, Standard, and Core subscribers access to three games: Dragon Ball Xenoverse 2, Hell Let Loose, and A Little to the Left. As usual, any progress made during the weekend also carries over automatically if you decide to purchase a game afterward. From the trio, Hell Let Loose is for shooter fans, offering 50 versus 50 PVP battles across various realistic World War II fronts. However, the gameplay is a much more hardcore experience compared to other shooters on the market. The title features infantry, tanks, and artillery warfare, with 14 roles available that offer different weapons and teamwork-related equipment. Next, Dragon Ball Xenoverse 2 comes in, touting its ties to the massive anime franchise. The title has players time-traveling to the past as a custom Dragon Ball character to make sure historical moments from the storyline happen just as fans remember. While the world itself is a massive one, fights happen in 3D arenas, taking cues from notable locations in the anime universe. If both those games are a bit too action-heavy, A Little to the Left is a cozy puzzle experience that aims to settle your perfectionist needs. The game has you sorting, stacking, and organizing household items from their awkward locations to more pleasing and organized placements. The controls mostly involve drag-and-drop operations, and some puzzles even have multiple solutions for neatness. Here are the three latest Free Play Days games and their supported platforms: Hell Let Loose - $24.99 (Xbox Series X|S, PC) DRAGON BALL XENOVERSE 2 - $5.99 (Xbox Series X|S, Xbox One, PC) A Little to the Left - $7.49 (Xbox Series X|S, Xbox One, PC) This Free Play Days promotion will end on Sunday, June 8, at 11:59 pm PT. Following this, expect another round of games to enter the program next Thursday.
    • AMD 25.6.1 driver out with RX 9060 XT support and a lot more FSR 4 games by Pulasthi Ariyasinghe A brand-new hardware launch is happening today for AMD, and to make sure its new GPUs are running properly, a new graphics driver has also landed right alongside it. The AMD Software: Adrenalin Edition 25.6.1 driver lands with support for the RX 9060 XT and the AMD Radeon AI PRO R9700, while also finally updating the number of games that support its AMD FidelityFX Super Resolution 4 upscaling technology. The consumer space-targeted RX 9060 XT graphics card comes in 8GB and 16GB flavors starting at $300 and $350 price points, respectively. Check out our launch coverage for this RDNA 4 GPU for more details here. At the same time, the AMD Radeon AI PRO R9700 comes in for handling professional workloads with a whopping 32GB of VRAM. While support for this card has already arrived with the latest driver, AMD is expecting to ship the product sometime in July 2025. The driver has also added official support for Onimusha 2: Samurai's Destiny Remaster as well, the Capcom-developed action game from last month. As for fixes, AMD has said that it has resolved reversed Quality and Performance selections in the Radeon Boost UI, as well as Le Mans Ultimate performance issues on RX 9070 series GPUs. There are quite a few known issues AMD is still working on: Stutter and lower than expected performance may be observed when using alt-tab and streaming to Discord with multiple monitors. Intermittent application crash or driver timeout may be observed while playing Marvel Spiderman 2 with Ray Tracing enabled on Radeon™ RX 9060 XT. Intermittent application crash may be observed when first launching The Last of Us Part 1 on Radeon™ RX 9060 XT graphics products. Stutter may be observed while playing games with some VR headsets at 80Hz or 90Hz refresh rate on some AMD Radeon™ Graphics Products such as the Radeon™ RX 7000 series. Users experiencing this issue are recommended to change the refresh rate as a temporary workaround. Intermittent system or application crash may be observed while playing Cyberpunk 2077 on some AMD Radeon™ Graphics Products such as the Radeon™ RX 7000 series. Intermittent application crash or driver timeout may be observed while playing Monster Hunter Wilds with Radeon™ Anti-Lag and Instant Replay enabled. Artifacts or corruption may appear while playing Battlefield™ V on Radeon™ RX 7000 series graphics products. Stutter may be observed while playing Call of Duty®: Warzone™ Season 03 ‘Verdansk’ map on some AMD Graphics Products. Stutter and lower than expected performance may be observed while playing 4K resolution YouTube videos in Chromium. Users experiencing this issue are recommended to play videos in full screen as a temporary workaround. Texture flickering or corruption may appear while playing The Elder Scrolls IV: Oblivion Remastered with AMD FidelityFX™ Super Resolution enabled on Radeon™ RX 9070 XT. Users experiencing this issue are recommended to disable AMD FidelityFX™ Super Resolution as a temporary workaround. As for FSR 4, these games are now supported by the popular upscaling tech for gaining more frames: Deadzone: Rogue Rem Survival F1 25 Runescape: Dragonwilds Frostpunk 2 Star Wars Outlaws Legacy: Steel & Sorcery Steel Seed Lords of the Fallen Stellar Blade Planetaries Virtua Fighter 5 R.E.V.O QANGA Wild Assault The complete list of games with FSR 4 support, as well as upcoming implementations, can be found on AMD's support page here. The WHQL-certified AMD Software: Adrenalin Edition 25.6.1 driver can now be downloaded from the AMD Software app as well as the changelog page on its official website here.
  • 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
      406
    2. 2
      +FloatingFatMan
      181
    3. 3
      snowy owl
      176
    4. 4
      ATLien_0
      170
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!