Hi. Does anyone have a script to do either of the following...making the image I use for my website's background automatically resize depending on the user's resolution and/or making the picture where it won't tessalate down the page. Thanks.
16 27309
Put the image in a div or table and set the width of that element to 100%
well i put the bg in a table but the picture stays the same size and it negates the no scroll code. also what is a div?
Heres a good example on how todo it. -
<html>
-
<head>
-
<title>How to stretch a background image.</title>
-
<style type="text/css">
-
body {margin:0px;}
-
#bg_image {
-
width: 100%;
-
height: 100%;
-
left: 0px;
-
top: 0px;
-
position: absolute;
-
z-index: 0;
-
}
-
#contents {
-
z-index: 1;
-
position: absolute;
-
}
-
</style>
-
</head>
-
-
<body>
-
-
<!-- this creates the background image -->
-
<div id="bg_image">
-
<img src="What Ever.jpg" style="width: 100%; height: 100%;">
-
</div>
-
-
<!-- this puts the contents of the page ontop of the background image -->
-
<div id="contents">This is a test.</div>
-
</body>
-
</html>
-
The <div> tag defines a division/section in a document.
well that div table thing works for auto resizing the background but it doesnt make it a no scroll background. is it possible to do both at the same time?
If your image is bigger than the browser window it will scroll.
Helle there,
I have a little problem with this option.
I have import the code in my document but the table for the flash file is overwrite.
please can sombody check my page www.ateliercentaur.nl/2006/elly/elly_main.html
thanks already.
ps. I'am not very good with div scripts understanding........ But the one that don't try never learn.
when i viewed the source it didn't look like you had the contents div in there.
Dear Clint,
I believe it is, but as I have write down @ the bottom I don't understand the hole div codes.
I use the code now becase I wan't to resize my background image becase its nessesayry the hole image is shown in each resolution. Ather javascript won't work but I understand that the flash movie must have a own div code????
Can you or aneybody else help me wat it must be???
thanks. learning step by step.........
[HTML]
<html>
<head>
<title>Elly Lucieer - . . . M O D E K U N S T . . .</title>
<meta name="author" content="BeginnersGeluk">
<meta name="copyright" content="BeginnersGeluk - M.Verdaasdonk">
<meta name="keywords" content="">
</STYLE>
<script type="text/javascript" src="ieupdate.js"></script>
<script language="JavaScript1.2">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.avail Height);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.wi ndow.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>
<body>
<div id="bg_image">
<img src="images/BG.jpg" style="width: 100%; height: 100%;">
</div>
<div align="center" id="contents">
<table width="100%" height="100%" border="0">
<tr align="center" valign="middle">
<td bgcolor="">
<script type="text/javascript">startIeFix();</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="swflash.cab#version=6,0,79,0"
id="main"
width="780" height="500">
<param name="wmode" value="transparent">
<param name="movie" value="flash/main.swf">
<param name="bgcolor" value="">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
name="main"
width="780" height="500"
src="flash/main.swf"
quality="high"
swliveconnect="true"
allowscriptaccess="samedomain">
<noembed>
</noembed>
</embed>
</object>
</table>
</div>
<script type="text/javascript">endIeFix();</script>
<!-- Begin code NO RIGHT CLICK-->
<!--<SCRIPT>
<!--
if (window.Event) // Only Netscape will have the CAPITAL E.
document.captureEvents(Event.MOUSEUP); // catch the mouse up event
function nocontextmenu() // this function only applies to IE4, ignored otherwise.
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e) // This function is used by all others
{
if (window.Event) // again, IE or NAV?
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</SCRIPT>
<!-- end code NO RIGHT CLICK -->
</body>
</html>
[/HTML]
I viewed the source code for your page and fixed it up alittle bit for you
Let me know if this works out ok for you
Dear Clint,
It's going the good way.
BUT..
when you clik the link on my page that opens the site the page you have help me with not opens full over the screen.
mabey you can see this @ www.atelier-centaur.nl/2006
and the flash movie is not in the middle of the valing???
have you changed also the javascript??
already thanks
one problem solved
There were 2 extra spaces in the script so Know only my problem with the valing I think.
I want the movie in the midle of the screen.
CU
Thanks Clint.
Up 2 do the next step for me.
I have learnt some new stuffffff.
CU
Sign in to post your reply or Sign up for a free account.
Similar topics
by: ray well |
last post by:
hi,
i have a very wide web page composed by a series of response.write
statements, that needs to be scrolled horizontally to be fully viewed.
my client wants the far right side of the page to...
|
by: Nathan |
last post by:
How doy you resize the background image to fill a form
when the form is resized?
|
by: mukeshgupta.WD |
last post by:
Hi,
i have seen in many web sites, the size of pages are automatically
resized according to screen resolution.
generally we create web layout for 800x600 but if we view it in1024x768
then the...
|
by: Seige |
last post by:
Ever had headache when you can't resize the background width using CSS:
body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}
It won't work, would it? Of course not, it's not even...
|
by: seymourowl |
last post by:
What im wanting to do is have a code for auto resizing a browser so that it automatically detects whether a screen is 1024x768, 800x600, or whatever. I want this so that my webpage is always centered...
|
by: Borges |
last post by:
Hi folks,
I've got a listview with several columns, and I'm trying to
automatically resize the columns when the control gets painted. I know
there are methods for this in .NET 2 but we're not...
|
by: PlushifiedNaruto |
last post by:
Hi. Does anyone have a script to do either of the following...making the image I use for my website's background automatically resize depending on the user's resolution and/or making the picture...
|
by: drum118 |
last post by:
Trying to resize a photo to use it as a background and it fails under
part of the css
<img src="subway/IMG_0730.JPG" width="3264" height="2448" alt="" />
I have try and the photo does not...
|
by: Sunny Sawrav |
last post by:
Hi there,
I'm working on a website right now. The website involves frames. 3 frames : top, mid, bot.
Top frame = menu
Mid frame = body
Bot frame = Links
Now, I've designed the webpages using...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |