|
CSS - Background: Fixed; Not Fixing
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 Similar TutorialsThe background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! 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? 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 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 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? 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! 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;} 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. 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 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, 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. Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! Hey all I'm not very experienced with this. I'm having some troubles with floating divs. The page is here And the css is here The problem is that when I resize the window on IE6/win the divs on the main column fall down to the bottom of the page. Really apreciate your help. Marcello I am a web designer, taking on the challenges of some front-end coding. I'm fairly proficient with tables and HTML code, but I am trying a new web site using div layout and heavy CSS. http://neovistaproj.pangin.net Can someone take a look at this code, and provide some insight? I would really appreciate it. Some known issues: 1) the background has a gradient and a dropshadow combination. you can see that it isnt behaving properly, along the right edge. the gradients do not match up, but i know this isnt because the images were cut wrong. it is behaving weird, the way i have the bg and the images overlying it each other. 2) at the bottom, i have a repeating bg image so that the text can be as long as necessary, and still have the proper white bg, with border, and dropshadow. i had to jimmy-rig it a little, and chop my content well into two sections. its a pretty bad solution. any ideas? i will gladly provide any of the source files, for assistance, and will most likely compensate the individual who can provide me a workable template, for this design. THANK YOU! hello forum, I am having problem in fixing my <div> position.The div become visible by an event.plz help me . Regards. Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks |
|||||||