|
CSS - Css Fixed Background In Ie Not Showing Up Right
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? Similar TutorialsHi 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? 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 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>
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 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! 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, 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 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 Hi, my css is probably a mess as I've been hacking things together for a few days. my site:jasondaydesign.com I have a div where my content divs are contained. In firefox & chrome, the background for the div shows fine. In IE, the background does not show. I'm not sure where the css issue is that's causing this. Could someone point me in the right direction for solving this? Thanks! Hi: I have the following in my CSS file: PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack? The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code: Code: #mainContent{
z-index:5;
padding:0;
margin: 2px;
background-image: url(images/common/bodybg.gif);
background-repeat:repeat-y;
height:100%;
}
Then I have my div tag: <div id="mainContent"> which holds 2 other divs, both without backgrounds. Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out. Here is the site: http://www.caillouette.com/SouthernLiving/ thanks I have been trying to implement a shadowed effect on a layout I'm working on. Kind of like on this page . I tried it with 3 nested divs and will show you guys both sets of code. With both methods, the top level div is not showing (the one with top.jpg as a background) because it appears that the middle.jpg is covering it. Here is the code I have: Method 1: HTML Code:
<div id="wrapper">
<?php mosMainBody(); ?>
</div>
CSS Code:
#wrapper {
width: 805px;
height: 100%;
margin: auto;
background: url(../images/middle.jpg) right repeat-y;
}
#wrapper::before {
display: block;
line-height: 0;
background: url(../images/top.jpg) no-repeat top right;
}
#wrapper::after {
display: block;
line-height: 0;
background: url(../images/bottom.jpg) no-repeat bottom right;
}
Method 2 Nested Divs: HTML Code:
<div id="wrap1"><div id="wrap2"><div id="wrap3">
<?php mosMainBody(); ?>
</div></div></div>
CSS Code:
#wrap1 {
background: url(../images/top.jpg) no-repeat top ;
width: 805px;
margin: auto;
clear: both;
}
#wrap2 {
background: url(../images/middle.jpg) repeat-y;
width: 805px;
margin: auto;
}
#wrap3 {
background: url(../images/bottom.jpg) no-repeat bottom;
width: 805px;
margin: auto;
}
The page I'm working on is located at http://www.havenotband.com/index.php Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? Hey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why? CSS Code: Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; } /* CSS Document */ It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file. Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it. The main content should include the left-sidebar and right-sidebar right? Please help! |
|||||||