|
CSS - Fixed Bg Image
I'm attempting to use the Declaration of Independence as the background for my site. It is much longer than wide, but I want to display all of it. So I want the background to stop scrolling when the bottom of the image is reached at the bottom of the browser window while still allowing content to scroll on top of it. I have seen this done with a completely fixed background, but not with a partially scrolling background. Does anyone know how, or even if, this can be done?
Similar TutorialsHello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. Hi All, I'm trying to add an image that will remain fixed on the screen, and I'm having a hard time positioning it using CSS. I already have a background image for the body (which is tiled), and this image needs to sit above that image, but below the rest of the content. Here's my code as it stands now: CSS: Code: @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(../assets/images/space_2_background.jpg);
background-repeat: repeat;
margin: 0;
background-attachment: fixed;
}
.oneColElsCtrHdr #sirius2 {
background-image: url(../assets/images/sirius_2.png);
background-repeat: no-repeat;
position: fixed;
padding-top: 123px;
padding-left: 743px;
}
.oneColElsCtrHdr #container {
width: 58em;
border: 1px solid #000000;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.oneColElsCtrHdr #header {
background-image: url(../assets/images/header_background.png);
background-repeat: no-repeat;
height: 73px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
}
.oneColElsCtrHdr #logo {
padding-top: 15px;
padding-left: 3px;
}
.oneColElsCtrHdr #mainContent {
background-image: url(../assets/images/page_1_background.png);
background-repeat: no-repeat;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
padding-top: 0px;
height: 520px;
}
.oneColElsCtrHdr #footer {
background-image: url(../assets/images/footer_background.png);
background-repeat: no-repeat;
height: 244px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sphere Nine Media</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body class="oneColElsCtrHdr"> <div id="sirius2"></div> <div id="container"> <div id="header"> <div id="logo"><img src="assets/images/sphere_nine_logo_v9.0.1(website).png" alt="Sphere Nine Media Logo" width="191" height="37" /></div> <!-- end #header --></div> <div id="mainContent"> <!-- end #mainContent --> </div> <div id="footer"> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> The code specific to this image is in bold red . I've tried coding this image both as a straight image and a background image, and I've gone through numerous iterations of changing positioning/padding/margin values, to no avail. The current code is the only variation I've happened upon that actually renders the image on the screen - you can see it live at http://www.spherenine.com/. Please let me know if this can be done using my current approach, or if there's a better way to accomplish it. I'll be happy to provide additional info if necessary. Thanks in advance. Sam Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers. 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. Hey there! New to code, sort of flying blind but learning a lot as I go along. I'm also kind of shooting for the stars with my design decisions. I was wondering if anyone here has any idea how to mimic the rotating image on Blizzard's website. (As I cannot post the URL, I assume everyone can figure out how to get to Blizzard Entertainment's website easy enough). If you zoom in and out on it, it remains static even as the pieces around it resize over it (this also happens at smaller resolutions). I would desperately like to know how to get it to lock flush against the side of the window like that. Additionally, you'll notice that it doesn't pop a scrollbar onto the window until you shrink the window smaller than the central content. I guess a bigger question is, is this even something achievable in CSS? Do I have to delve into Flash or Javascript to do it, and if so, does anyone know how? Thank you so much in advance! Hello all i am having trouble with getting a layer to stay put when i school down the page. This is my code: Code:
#Layer1 {
position:absolute;
width:64px;
height:73px;
z-index:1;
left: 0px;
top: 101px;
}
<div id="Layer1">
<div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
</div>
Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all. If anyone could help then that would be great David I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> 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. I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 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. 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> ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript? 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>
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'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags). First thing's first: Images I'm moving around a bg_boarder.jpg and bg_general.jpg bradyoo.com/test.html Both bg imgs in body {} - boarder img scrolls. bradyoo.com/test02.html Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo. bradyoo.com/tes03t.html Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper. I even tried fixing everything (not the optimal result, but I will use it if this is the only solution) bradyoo.com/test04.html Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling. Please look at http://www.mailhorde.com/scripts.php and http://www.mailhorde.com/ You will see what i mean. THe navigation bar is being stretched down. I have the top image in a table cell of its own. Is there any CSS that will stop this from happening? Thanks, Andrew 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? |
|||||||