|
HTML - Fixed Enlarged Background
Similar Tutorialshi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" This one has been giving me a headache for days now. I wish to place an image in the background so my text can scroll while the image remains still: <div id ="scroll" style="padding:0px; font-size:0px; overflow:hidden; background-image:url(files/images/b2l.jpg); float:left; height: 480px; width: 360px; color: #FFFFFF; font-family:Arial, Helvetica, sans- serif;"> http://www.muskmagazine.com/wintertrendstest.html This works fine on Safari and Firefox but when viewed on IE6 the image moves along with the text. I have been playing with position:fixed; with no luck. Soon as I get it working on IE6 the image is miss- aligned in Safari/ Firefox. Please someone have mercy! Justin I have a site with text scrolling over a fixed background - mbccc.net - and I want the background to be an imagemap so's I can link from different parts of it. But I can't make it work. I can make an imagemap work alright. But not on a fixed background image. Is it possible or does making the image a 'background' image and 'fixing' it in position mean that it can't be referenced as an imagemap any more? regards, ab I used this code here but it doesnt seem to work for GoogleChrome browser well, as it did for the others. Is there a code that will work for all the browsers? HTML Code: <html>
<head>
<script language="javascript">
function randomBackground()
{
var myImages = Array();
myImages[0] = 'xxx.jpg';
myImages[1] = 'xxx.jpg';
myRandomNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
}
</script>
<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body onload="randomBackground();"></body>
can someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, Hi All This is my first post so i hope I provide all the info you need, to be able to help. I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago. Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image. here is the code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Barcaldine Tourist Park</title>
</head>
<body>
<div align="center"> <center>
<table width="1000" border="0" cellpadding="0" height="100%">
<tr>
<td height="54" colspan="2">
<div align="center">
<h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine
Tourist Park</font></h1>
</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
<li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
<li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Special Offers
</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local
Attractions</span></a>
<ul class="sub">
<li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
<li><a href="#nogo55">Tree of Knowledge</a></li>
<li><a href="#nogo56">Artesian Country Tours</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td rowspan="2" width="99"> </td>
</tr>
<tr>
<td rowspan="5" width="895" bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99" height="23"> </td>
</tr>
</table>
</center></div>
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
</div>
</body>
</html>
Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. I have a control on a pop up that i cant seem to get rid of the scroll bars....How do you create a pop up window with no scroll bars I want it to use the scroll bars on the control instead....any help with this issue?? Hello, I am new in html, please could you advise with the following? In my page I have a caption and an iFrame where the height is big enough so that the scrollbar is never displayed - deliberately. I can scroll the page including the iFrame content up and down normally - cool. Now I fix the caption. When scrolling, the iFrame content goes over the caption. I want the iFrame content to stay below the caption. How to do this? I don't want to use iFrame scrollbar but the window scrollbar for scrolling. Thank you! HTML Code: <style>
fixed{position:fixed;color:red;}
</style>
<body>
<fixed> <h1>FIXED CAPTION</h1> </fixed>
<br><br><br>
<iframe src="test.html" width=815px height=2000px name="iFrame1" scrolling="auto"
frameborder="0" allowtransparency="true">
</iframe>
</body>
First of all im sorry if i double posted but i dunno what to search for and i tried lookin thru the forum b4 i posted .. Well, my problem is im a total beginner (noob) in html/css/javascript codin..but i was doin site to try coding..i divided my site into 4 main sections usin <div> as u can see in the pic (pic at end of ma post), but the my problem is i had to copy the codes of the header and the two menus in every page, then after endin it, i misspelled something in a menu..so had to change it in every page (about 20),so i wanted to make the header and menus each in a file and make them fixed, so i put each in a html and made an iframe and inserted and it worked but (i knw too many buts XD) the side menu was a spry menu..it cant go out of its frame so i had to make it expanded menu So,My question is i wanna do the spry menu..so is there any other way to make the side menu & header each in a document and link it to every page..so when i wanna change something..i can change from one document and it changes all, coz it seems tht iframes tht is the only thing tht gnna work. I knw i wrote alot..sorry >.<..well, i hope u cud help me out..thnx in advance Howdy, I wanted to have a fixed bar at the bottom of website just like Facebook. Can anybody know how to do that? Bar should be customizable as per my requirement. Thanks in Advance. Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? Hi , I am trying to make a plugin for Mybb Forums and I needed to get the last 10 threads scrolling up , so I used the Marquee Tag . When I tried to view the plugin , I found that half the thread subject only appears while the rest is invisitble(because they don't fit in the box) , so I guessed that the Marquee's width exceeded the width of the table(box) . I tried to make a table inside the Marquee but still didn't work . I need to limit the table's width or the marquee's width so that when the thread's subject is too wide , it starts a new line , not just make the table wider . I hope you can understand what I mean , because I feel I can't understand it . Thanks Alwahsh Hi, I'm doing a website and for my link i would like drop-down menus at the top but i want it to stay at the top when you scroll. Can anybody point me to these. I have no idea how to do drop-down menus that look good. Take a look at http://www.runehq.com/ and look at the menus at the top. I would like some like that. Help would be great. Thanks. ToshNeox http://junksen.tumblr.com/ i have this blog, and i want the right and left bars to be fixed so that when i scroll down/up, it only scrolls down the middle post area. is there any way to do this? i attached an image that should give an idea of what im looking for. ive tried EVERYTHING and have no been able to get this to work. maybe dreamweaver just isnt good for this type of things? thanks in advance. the website and pics are in the attached zip file |
|||||||