|
CSS - Background Scrolling To The End Of Page Within A Div
Hi, everyone! I'm working on a couple of layouts now and having a huge, uh, brain fart, I guess is the best way to put it. So before I continue on my train of thought and design these things a certain way, I was wondering something...
If you have a container centered on a page, how do you make a background within that container repeat the length of the page? I've tried it before and I used to remember it, but my recent attempts ended in this: chuu.reversecorte.net ... Yeah. Not working. So if anyone could tell me what I'm doing wrong, I'd really appreciate it before I continue on this track to imminent failure! Similar TutorialsHi 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 I have a scrollable DIV on a page, I also have a DIV containing a button which has a fixed position. Is it possible to get the button to scroll withing the DIV and not with the actual page? If so, besides having the code for the button inside the tags of the scrollable DIV, do I need anything else? I'm trying to write a layout that has a header, left nav, and then scrolling div that scales to fit main content area. Is anyone aware of a good example or solution that exists to do this? Every example that I've looked at so far doesn't create a scrolling area when scaled to 100%. Thanks! I'm having a problem with this page: http://graffetto.com/news/ Works fine in Firefox, however in IE the browser won't scroll to reveal the rest of the page. code is he Code: #companyNewsButton
{
position: relative;
top: 35px;
left: 5px;
font-weight: bold;
color: #082750;
}
#newsContent
{
position: relative;
background-image: url(http://graffetto.com/images/newsHeader.gif);
background-repeat: no-repeat;
width: 573px;
top: 50px;
left: 10px;
margin: 0px;
padding: 0px;
}
#newsArticleList
{
position: relative;
margin: 0px;
padding: 5px;
top: 65px;
left: 0px;
background-color: #C8D0D8;
border: 1px dashed;
border-color: #4B617F;
}
#regularCopyrightContainer
{
position: relative;
top: 100px;
margin: 0px;
padding: 0px;
text-align: center;
width: 592px;
color: #4B617F;
}
anyone have any idea why this is? Can't get a background using the style sheet. The image exists. If I put <img src="images/background_2b.jpg" alt=""> in the body I get an image Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Christian Views Home</title> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="imagetoolbar" CONTENT="no"> <link rel="stylesheet" href="stylesheets/ChristianViews.css" type="text/css"> </head> <body> <img src="images/background_2b.jpg" alt=""> </body> </html> Code: * {padding:0; margin:0;}
ul {margin-left:20px; padding-left:0;}
body
{
background-image:url('images/background_2b.jpg');
}
h2, h3
{
color: #aa8800;
}
Can't be more simpler than this ! Obviously I want the same css file to be loaded for each page but for each individual page I may want a different background image postitioned using CSS, is there an easy way to achieve this? thanks for your time. #bg-one { background: white url(some.png); } #bg-two { background: white url(someother.png); } =========== ... </head> <body id=bg-one"> ... ... </head> <body id=bg-two"> Hi, I wanted to make active page link as bold and blue. When I hover the menu/link it works but when I click the menu item/link it doesn't. Here is my script. Please help its driving me crazy. #menu { font-family: "trebuchet ms", verdana, sans-serif; font-size: 14px; font-weight: none; position: absolute; height: 27px; top: 60px; left: 0px; width: 100%; padding: 0px; color: #000000; background-color: #eee } a:link { font-weight: none; text-decoration: none; color: #000; } a:visited { font-weight: none; text-decoration: none; border-bottom: 1px dotted #369; color: #000; } a:hover { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } #menu a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } Hi there, I have two problems with the display of my website in different browsers. The first is when you view my site, http://www.tophatweddings.co.uk in FireFox. In IE 6 the white background extends to the foot of the content. However in Firefox you'll notice it doesn't and the left, central and right columns all finish at different levels. How can I get the white background to behave in the same way as IE? My second issue is with IE7. Now, some people might actually download and install this "browser" - those poor people. Anyway in IE 7 you'll notice the footer just decides to display halfway through the page because I guess some CSS has changed in this version of IE. Does anyone know what this could be? Help with either of these issues would be greatly appreciated and reputation points award to those who post helpful answers. Thanks - Hi all. This is my first time posting ever so please be gentle. On my website I have background image with stripes and grey. I want it to go all the way down the bottom of the page. Currently the background image stops where the content ends. I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window. Can someone please help me out? Page URL: leannemarie.com/testing_index.php CSS: leannemarie.com/css/testing_main.css Thanks LeAnne I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen. Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page? My code is accessible via the /Samples/ directory. Thanks so much... midcitybrewery.com/Samples/sample.html I'm trying to set a background image that spans from edge to edge in my browser window. Currently, I have everything set up and positioned as I'd like, but the image stops just short of reaching the very edges of the browser window on the left and right sides. The image itself is 2000px wide, so that various browser widths show the continuation of the image. You can see the problem I have at URL Notice the blue lines on either side aren't quite making it to the edge of the browser. The relevant CSS is located at URL The .main div at the bottom is the one with the background image code. Thank you for any help offered. Hi, I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code:
#greybg {
background-image: url("../images/body/greylong.gif");
background-repeat: repeat-x;
background-position: 50% 0%;
}
This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. 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 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. Good morning, I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated. I am attaching my code: window.onbeforeunload=new Function("Procesando.style.visibility='visible';"); window.onblur=new Function("Procesando.style.visibility='hidden';"); //window.onfocus=new Function("Procesando.style.visibility='hidden';"); document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+ '<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+ '<option> </option>\n'+ '<option> Procesando su petici'+unescape("%F3")+'n. </option>\n'+ '<option> Espere por favor... </option>\n'+ '<option> </option>\n'+ '</select></div>\n'); |
|||||||