CSS - Fixed Background With Scrolling Text

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

Hey folks...

I'm working on a site that uses CSS, and the PHP "switch" statement, to pull pages into a main div on the index page.

I put a background image into the main ".content" div, which should remain fixed while the content (brought in by the switch), scrolls over it. When I wrote the image in, FF did this by default, whereas in IE, the image would scroll with the text... so I put in the "background-attachment:fixed" code in, and now it works fine in IE, but FF has suddenly developed a problem with it.. the image is off-center, so only part of it shows, leaving huge white spaces where it should be covered.

You can look at the site here.

I've attached the code for the index page as a word document. Hope this is OK, I figured it would be better than sticking all the code on here!

Anyone have any ideas what I'm doing wrong?

BW. x

How to keep bg fixed with top header non moving

refer http://vedasprojects.com/

I want to keep the top header fixed

At present when i scroll the page , the top header moves ...

I dont want the header to move ...

please help

Hi there,

I am trying to place a fixed backgroung image to a div, which is to be position to the bottom right of the screen. The code I have so far:

Code:

body#fixed { 
   background-image: url(../images/fixed-bg.png);
   background-position: bottom right;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }

using <div id="fixed"></div>

However it doesn't seem to work. I can't add the bg image to the body style as I already have another background image specified for the entire document.

Any ideas?

Hi, I have this problem with loading new movie on the same page with fixed background.
Here is an example of what i want to do . I have two flash files main.swf and movie1.swf, and main.swf loads first when i open index page. On the button of this main.swf i have action

loadMovieNum("movie1.swf", 0);

which should load new movie in the same window and everything works fine when i test SWF file but when i embed it in a HTM page with fixed background only first move main.swf loads fine as it should but when i click on the button in this main.swf to load new movie movie1.swf in the same page it will not load??? It starts to load and than just stops. I guess there could be something wrong with my CSS style but i have never been working with CSS as i am only beginner in web design. Could anyone help here please? Here is y CSS style. PHP Code:
 body {margin:0px; padding:0px; vertical-align:top; background:url(images/back.jpg) no-repeat top #2BA3F4;} 

Here's the page:

http://ktd.sytes.net/files/index.html

In Mozilla, on Windows and Linux, and Konqueror, the image of the donkey says fixed in the center of the screen. However, in IE, it scrolls on down. Not sure what I'm doing wrong here. I think it may have something to do with my layered divs.

Any ideas? Here my style sheet:

http://ktd.sytes.net/files/float3.css

Thanks!

Here's the code in question

I've attached the background image with the following CSS:
Code:

body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}

It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine.

Any thoughts on this?

MPEDrummer

I'm trying to use stylesheets to make a fixed, no-repeat background. It is working in Mozilla 1.0, but it's not showing up right in IE 5.5. Any ideas why? The site is at http://www.people.virginia.edu/~bjl6d/journal.html.

The part that I put in my style sheet is:
.journaltext { font-family: "Book Antiqua", Garamond; font-size: 12px; font-weight: normal; color: #000000; background-image: url(../images/layout/Layout_r2_c2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top}

Everything is perfect in Mozilla, but when I view it in IE, the background is not fixed. It doesn't repeat, which is good, but it's still not fixed. Any ideas what's wrong here?

I have a background that is fixed, but it isn't large enough to fit all monitors, so i'd like to stretch it to fix (not repeat), but can't seem to figure out how.. here's my current code

Code:

<style type="text/css">
body 
     {background-image: url("/Images/AngelLayout.jpg");
          background-repeat: no-repeat; 
background-attachment: fixed;}
</style>

Hi all,

Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized.

So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it.

Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page?

Thanks.

URL

Hi all, I got stuck on my site using background fixed attributes.. Although everything works fine for me in ie , in firefox , when I scroll the content, the background and everything flickers ... Does anyone know how to fix this ? I have been bothering with that at least one wekend and cant figure out where the problem is...????

Thanx in advance

Hi, everyone! I'm working on a couple of layouts now and having a huge, uh, brain fart, I guess is the best way to put it. So before I continue on my train of thought and design these things a certain way, I was wondering something...

If you have a container centered on a page, how do you make a background within that container repeat the length of the page? I've tried it before and I used to remember it, but my recent attempts ended in this:

chuu.reversecorte.net

... Yeah. Not working.

So if anyone could tell me what I'm doing wrong, I'd really appreciate it before I continue on this track to imminent failure!

Hi everyone, this is my first post and I hope it's easily resolved.

I'm new to CSS and working through CSS - The Missing Manual while slowly overhauling an old table-based web journal on the side.

I'm trying to do the following:

Left - navbar (~200px)
Center - journal postings (~600px)
Right - fixed image (~200px) // I want this to always be in sight

I've gotten the first two nailed down nicely, but I'm having a really hard time with getting the fixed image to work.

In extreme shorthand, the code relationship looks like this:

<body>
<nav-journal-image-wrapper width=1000>
<nav-journal-wrapper width=800>
<nav width=200> <journal width=600>
</njw>
</njiw>

With the extra 200px of width in the final wrapper, I've been able to get the background image to be fixed and show nicely to the right of my navbar and journal post by making it the same 1000px in width.

If the window is stretched, everything stays where it belongs - you just see more body background color.

The problem is, when the window is condensed the final wrapper - despite having a set width - also is squeezed and my background image recedes under the journals.

What I don't understand is why my navbar and journals seem impervious to small windows, but the wrapper around them with the background image is not?

My code validates, and the relevant parts of the CSS start now:

Code:

<style type="text/css">
body {
	background-color:#333;
}

/* without this wrapper, the background in #nav-post-portrait-wrapper aligns
with the screen right, not the wrapper's right */
#final-wrapper {
	background-color:red;
	width: 1034px;
	margin: 0 auto 0 auto; padding: 0;
}

/* this gives me an extra 200px on the right to show the fixed background image */
#nav-post-portrait-wrapper {
	margin: 0;
	padding: 0;
	width: 1034px; /* sets the max but doesn't seem to be preventing collapse */
	background-color: white;
	background-image: url(CSS-TESTING/background-portrait-2.png);
/* the image is also 1034px wide - I want this wrapper's width to be frozen! */
	background-repeat: no-repeat;
	background-position: top;
	background-attachment:fixed;
}

/* this groups the navbar and postings together */
#nav-and-post-wrapper {
	background-color:#0F0;
	margin: 0;
	padding: 0;
	width: 828px; /* prevents collapse */
}

/* begin nav sidebar CSS code */
#mainNav-wrapper {
	float: left;
	top: 0;
	margin: 0; padding: 0;
	height: 312px;
	width: 210px;
}

ul#mainNav {
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	width: 200px;
	border-left: 2px solid #930;
	border-top: 2px solid #930;
	border-right: 2px solid #930;
}

ul li {
	width: 200px;
	margin: 0; padding: 0;
	height: 60px;
	border-bottom: 2px solid;
	border-bottom-color:#930;
}
/* end nav sidebar CSS code */

/* begin journal post CSS code */
#post-wrapper {
	margin-left: 214px;
}

.post {
	background-color:#6F9;
	border: 2px solid #930;
	width: 600px;
	height: auto;
	margin: 20px 0 0 0;
	padding: 0;
}
/* end journal post CSS code */
</style>

<body bgcolor="#FFFFFF">
<div id="final-wrapper">
<div id="nav-post-portrait-wrapper">
<div id="nav-and-post-wrapper">
<div id="mainNav-wrapper">
<ul id="mainNav">
	<li><a href="aboutme.htm" id="nav-about-me"></a></li>
        <li><a href="journalmain.htm" id="nav-journal-main"></a></li>
	<li><a href="beverageguide.htm" id="nav-beverage-guide"></a></li>
	<li><a href="guestbook/index.php" id="nav-graffiti"></a></li>
	<li><a href="contact.htm" id="nav-contact"></a></li>
</ul>
</div>

<div id="post-wrapper">
<div class="post">
la la la
</div> <!-- closes post div class -->

<div class="post">
la la la
</div> <!-- closes post div class -->

<div class="post">
la la la
</div> <!-- closes post div class -->

<div class="post">
la la la
</div> <!-- closes post div class -->

<div class="post">
la la la
</div> <!-- closes post div class -->

</div> <!-- closes post-wrapper div id -->
</div> <!-- closes nav-and-post-wrapper div id -->
</div> <!-- closes nav-post-portrait-wrapper div id -->
</div> <!-- closes final-wrapper div id -->
</body>

Thank you very much!

I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour.

I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas?

This is the technique I've been using:

Code:

<div id="header-fluid">
<div id="header-fixed">

<div id="header"></div>
<div id="nav"></div>

</div><!-- head-fixed -->
</div><!-- head-fluid -->

Code:

<div id="content-fluid">
<div id="content-fixed">

<div id="content"></div>

</div><!-- content-fixed -->
</div><!-- content-fluid -->

Code:

<div id="footer1-fluid">
<div id="footer1-fixed">

<div id="sponsors"></div>

</div><!-- footer1-fixed -->
</div><!-- footer1-fluid -->

Code:

<div id="footer2-fluid">
<div id="footer2-fixed">

<div id="copyright"></div>

</div><!-- footer2-fixed -->
</div><!-- footer2-fluid -->

Thanks for your time on this!!
Hanek

Need to know if it is possible to specify alt text for a fixed background image.

background-image:url(cssback.gif); background-repeat:no-repeat; background-position:50px 355px;

Any insight as to whether or not this is possible would be greatly appreciated.