• 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

    • Nintendo Switch 2 launches, where to buy and a list of games that it may not support by Sayan Sen Nintendo announced the Switch 2 back in early April this year and then followed that up with more details related to performance and hardware features later. The company touted 10x the performance of the Switch. However, on the flip side, the battery suffers, and you also need new microSD Express cards for storage. For those who need a refresher, here are the technical specification details of the Switch 2: Specification Details Dimensions Approx. 166mm x 272mm x 13.9mm (with Joy-Con 2 attached); Maximum thickness from control stick tip to ZL/ZR buttons: 30.7mm Weight Approx. 401g (console only); Approx. 534g (with Joy-Con 2 controllers attached) Screen 7.9-inch capacitive touch LCD; 1920x1080 resolution; HDR10 support; VRR up to 120 Hz CPU/GPU Custom processor made by NVIDIA Storage 256 GB UFS (a portion reserved for system use) Communication Wireless LAN (Wi‑Fi 6), Bluetooth; Wired LAN available in TV mode via dock Video Output Up to 3840x2160 at 60 fps via HDMI in TV mode; Supports 120 fps at lower resolutions; HDR10 enabled Audio Output Linear PCM 5.1 channel via HDMI; Stereo speakers Microphone Built-in monaural microphone with noise cancellation, echo cancellation and auto gain control Buttons POWER and Volume buttons USB Ports 2 USB Type-C ports (bottom port for charging/dock connection; top port for accessories/charging) Audio Jack 3.5mm stereo mini plug (CTIA standard) Game Card Slot Supports both Nintendo Switch 2 and Nintendo Switch game cards Expansion Slot microSD Express card slot (compatible with cards up to 2 TB; other microSD cards can copy screenshots and videos) Sensors Accelerometer, gyroscope, brightness sensor Battery Lithium-ion, 5220 mAh; Approx. 2–6.5 hours lifetime; 3-hour charge time in sleep mode Dock Approx. 115mm x 201mm x 51.2mm; Weight: approx. 383g For those looking to get one, major retailers like Walmart, GameStop, Best Buy, and Target have all confirmed that they will have limited console stock from time to time so you will need to be on alert and check back. Nintendo has also published a full list of games that may not work on the Switch 2: Borderlands 3 Chrono Cross: The Radical Dreamers Edition Crash Bandicoot N-Sane Trilogy Guilty Gear XX Accent Core Plus R KarmaZoo Marvel vs. Capcom Fighting Collection: Arcade Classics Mortal Kombat 1 Overwatch 2 Star Wars: Knights of the Old Republic II: The Sith Lords Star Wars Republic Commando Super Mega Baseball 4 Tombi! Special Edition Tony Hawk's Pro Skater 1+2 Touhou Genso Wanderer Reloaded Ty the Tasmanian Tiger HD Warriors: Abyss However, keep in mind that Nintendo last updated the support list last month on May 27th and the company may still be testing these. So keep an eye on the official list of games on this webpage here on Nintendo's site. Have you managed to pick up the Nintendo Switch 2? Let us know in the comments.
    • Court orders Apple to keep web links in the App Store, eroding its iOS payment monopoly by Fiza Ali Apple has been ordered to continue permitting web links and external payment options in the App Store after its bid to halt court’s ruling was declined today by a higher court. Earlier this year, in April, a federal judge decreed that Apple must allow developers to include web links in their iOS apps, remove restrictions on link formatting, and enable external payment methods without taking a commission on transactions. Apple immediately appealed and sought an injunction to delay implementation of the order while the case progressed. However, the United States Court of Appeals has now refused Apple’s emergency request to stay the district court’s order. In its decision, the panel held that Apple had not demonstrated a sufficient likelihood of success on appeal, nor that it would suffer irreparable harm if the order were enforced. The court also considered potential prejudice to other parties and the public interest, concluding that an immediate suspension was not warranted. This ruling makes it much harder for Apple to overturn the April decision, which came from a lawsuit initiated by Epic Games. Epic first sued Apple’s App Store policies in 2020, claiming that the company’s restrictions harmed competition. While Epic did not prevail on every count, the court did rule that Apple must allow developers to inform users of alternative purchasing options at better prices. Despite that narrow victory, Apple repeatedly failed to conform to the terms from the original 2021 ruling, prompting the judge in April to issue a more detailed order outlining precisely how the App Store must be “opened up”. In response to the April ruling, prominent third-party apps have swiftly implemented web-based purchasing links. Both Spotify and Amazon’s Kindle app now include buttons directing users to purchase subscriptions via their websites, bypassing Apple’s in-app payments. Additionally, Fortnite has made a comeback on iOS after around five years, presenting users with the choice between Apple’s in-app payment system and Epic’s own payment and rewards mechanism. According to Epic CEO Tim Sweeney, there is presently a 60:40 split in usage favouring Apple’s system over Epic’s, though the gap appears to be narrowing. An Apple spokesperson, Olivia Dalton, issued a statement expressing the company’s disappointment: For now, Apple must comply with the existing injunction. Unless the Appeals Court later overturns the ruling, developers can continue to include web payment links, and Apple’s longstanding monopoly over iOS payment processing may continue to erode. The ultimate resolution will depend on the outcome of the ongoing appeals, which could set a significant precedent for how app marketplaces operate in the future. Source: The Verge
    • Reddit posts are all public, no login(therefore no agreeing to contract) to view the content. It's like the equivalent of sitting in a library and writing down notes from a textbook without signing it out and they start suing you for writing notes.
  • Recent Achievements

    • 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
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
  • 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!