CSS - Stretching A Fixed Background

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?

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?

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

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 All,
I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls.

Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on.

Thanks

URL

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.

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

How can I fix a Div a set distance below another Div without a set height?

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well.

I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far.

Here is what's happening.

So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div?

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>


<div id="main">
<div id="header"></div>
<div id="topnav">
	<a href="index.php" class="topnav">home</a>
	<a href="cards.php" class="topnav"> cards</a>
	<a href="faq.php" class="topnav"> faq</a>
	<a href="about.php" class="topnav"> about</a>
	<a href="contact.php" class="topnav"> contact</a>
</div>

<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
	<div>
	<p>Hello</p>
	<p>&nbsp;</p>
	<p>This</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>is</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>a</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>test</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>to</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>seee</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>if </p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>this</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>is</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>working.</p>
	<p>&nbsp;</p>
	<p>thank you.</p>
	<p>&nbsp;</p>
	<p>&nbsp; </p>


	</div>
	
	<div id="footline">

</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
	<a href="index.php">home</a>
	<a href="cards.php"> cards</a>
	<a href="faq.php"> faq</a>
	<a href="about.php"> about</a>
	<a href="contact.php"> contact</a>
</div>
</div>

</div>
<!-- END EDITABLE AREA-->



</BODY>
</HTML>