|
CSS - Css Fixed Background
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? Similar TutorialsHow 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? 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 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 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 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 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 have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about Hi all, I'm trying to do a div at the bottom of the screen as being a fixed position but the problem with this it does not work in IE. So then how would i go about doing this? css Code: Original - css Code .footerBar { background-color:#CCCCCC; margin: 0 auto 0 auto; width:100%; height:40px; position:fixed; color:#FFFFFF; left:0px; bottom:0px; }
html Code: Original - html Code <div class="footerBar"> Hello World </div> <div class="footerBar"> Hello World </div> So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Hi! I'm new here, so I'd like to greet everyone first. Secondly.. I have a minor problem with my test webpage. I'm not an expert in CSS, but I did manage to sort-of make my own web template and all. Now the problem is that with resolution smaller than 1024*768 main frame of the page (post frame - blog) jumps over the sidebar. Here's the webpage so you can see for yourselves what my problem is. I want it to be fixed in browser (as in "when I resize the browser window, the whole layout says fixed and I need to scroll to see the very right end of it"), but don't know how to do that. Any help, please? The whole template is still under construction.. and the webpage is just a test page. The real page is elsewhere waiting to get the new template. hi I have a page which has the top menu section fixed (using CSS), and the remainder of the page can be scrolled ... i.e. there are no frames. However the code below works well in firefox, but not IE. Could anyone please help make the code the work in IE (and all other major browsers). cheers nathan here's the code: Code: <style type="text/css" media="screen">
html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:505px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2 { margin-top: 0; }
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
</style>
|
|||||||