473,397 Members | 1,949 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,397 software developers and data experts.

Auto resizing of a background and a no scroll bg function.

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.
Oct 29 '06 #1
16 27309
Does anyone know?
Oct 30 '06 #2
AricC
1,892 Expert 1GB
Put the image in a div or table and set the width of that element to 100%
Oct 30 '06 #3
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?
Nov 1 '06 #4
iam_clint
1,208 Expert 1GB
Heres a good example on how todo it.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head> 
  3. <title>How to stretch a background image.</title>
  4. <style type="text/css">
  5. body {margin:0px;}
  6. #bg_image {
  7. width: 100%;
  8. height: 100%;
  9. left: 0px;
  10. top: 0px;
  11. position: absolute;
  12. z-index: 0;
  13. }
  14. #contents {
  15. z-index: 1;
  16. position: absolute;
  17. }
  18. </style>
  19. </head>
  20.  
  21. <body>
  22.  
  23. <!-- this creates the background image -->
  24. <div id="bg_image"> 
  25. <img src="What Ever.jpg" style="width: 100%; height: 100%;"> 
  26. </div>
  27.  
  28. <!-- this puts the contents of the page ontop of the background image -->
  29. <div id="contents">This is a test.</div> 
  30. </body>
  31. </html>
  32.  
Nov 1 '06 #5
AricC
1,892 Expert 1GB
The <div> tag defines a division/section in a document.
Nov 1 '06 #6
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?
Nov 6 '06 #7
AricC
1,892 Expert 1GB
If your image is bigger than the browser window it will scroll.
Nov 6 '06 #8
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.
Jan 15 '07 #9
iam_clint
1,208 Expert 1GB
when i viewed the source it didn't look like you had the contents div in there.
Jan 15 '07 #10
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.........
Jan 15 '07 #11
iam_clint
1,208 Expert 1GB
[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
Jan 15 '07 #12
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
Jan 15 '07 #13
sorry link is wrong


klik here
Jan 15 '07 #14
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
Jan 15 '07 #15
iam_clint
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Elly Lucieer - . . . M O D E K U N S T . . .</title>
  4. <meta name="author" content="BeginnersGeluk">
  5. <meta name="copyright" content="BeginnersGeluk - M.Verdaasdonk">
  6. <meta name="keywords" content="">
  7. </STYLE>
  8. <script type="text/javascript" src="ieupdate.js"></script>
  9. <script language="JavaScript1.2">
  10. <!--
  11. top.window.moveTo(0,0);
  12. if (document.all) {
  13. top.window.resizeTo(screen.availWidth,screen.availHeight);
  14. }
  15. else if (document.layers||document.getElementById) {
  16. if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
  17. top.window.outerHeight = screen.availHeight;
  18. top.window.outerWidth = screen.availWidth;
  19. }
  20. }
  21. //-->
  22. </script>
  23. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  24. <style type="text/css">
  25. body {margin:0px;}
  26. #bg_image {
  27. width: 100%;
  28. height: 100%;
  29. left: 0px;
  30. top: 0px;
  31. position: absolute;
  32. z-index: 0;
  33. }
  34. #contents {
  35. width: 100%;
  36. height: 100%;
  37. z-index: 1;
  38. position: absolute;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="bg_image"> 
  44. <img src="http://www.atelier-centaur.nl/2006/elly/images/BG.jpg" style="width: 100%; height: 100%;">
  45. </div>
  46. <div align="center" id="contents" valign="middle">
  47. <table width="100%" height="100%" border="0">
  48. <tr align="center">
  49. <td bgcolor="">
  50. <script type="text/javascript">startIeFix();</script>
  51. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  52.   codebase="swflash.cab#version=6,0,79,0" 
  53.   id="main"
  54.   width="780" height="500">
  55.   <param name="wmode" value="transparent">
  56.   <param name="movie" value="http://www.atelier-centaur.nl/2006/elly/flash/main.swf">
  57.   <param name="bgcolor" value="">
  58.   <param name="quality" value="high">
  59.   <param name="allowscriptaccess" value="samedomain">
  60.   <embed
  61.  type="application/x-shockwave-flash"
  62.  pluginspage="http://www.macromedia.com/go/getflashplayer"
  63.  name="main"
  64.  width="780" height="500"
  65.  src="flash/main.swf"
  66.  quality="high"
  67.  swliveconnect="true"
  68.  allowscriptaccess="samedomain">
  69.  <noembed>
  70.  </noembed>
  71.   </embed>
  72. </object>
  73. </table>
  74. </div>
  75. <script type="text/javascript">endIeFix();</script>
  76.  <!-- Begin code NO RIGHT CLICK-->
  77. <!--<SCRIPT>
  78.    <!--
  79.    if (window.Event) // Only Netscape will have the CAPITAL E.
  80.    document.captureEvents(Event.MOUSEUP); // catch the mouse up event
  81.    function nocontextmenu()  // this function only applies to IE4, ignored otherwise.
  82.    {
  83.     event.cancelBubble = true
  84.     event.returnValue = false;
  85.     return false;
  86.    }
  87.    function norightclick(e) // This function is used by all others
  88.    {
  89.    if (window.Event) // again, IE or NAV?
  90.    {
  91.    if (e.which == 2 || e.which == 3)
  92.    return false;
  93.    }
  94.    else
  95.    if (event.button == 2 || event.button == 3)
  96.    {
  97.    event.cancelBubble = true
  98.    event.returnValue = false;
  99.    return false;
  100.    }
  101.    }
  102.    document.oncontextmenu = nocontextmenu;  // for IE5+
  103.    document.onmousedown = norightclick;  // for all others
  104.    //-->
  105.    </SCRIPT>
  106. <!-- end code NO RIGHT CLICK -->
  107. </body>
  108. </html>
  109.  
Jan 15 '07 #16
Thanks Clint.


Up 2 do the next step for me.

I have learnt some new stuffffff.


CU
Jan 15 '07 #17

Sign in to post your reply or Sign up for a free account.

Similar topics

2
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...
2
by: Nathan | last post by:
How doy you resize the background image to fill a form when the form is resized?
7
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...
14
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...
1
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...
1
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...
2
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...
5
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...
0
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...
0
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
0
BarryA
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...
0
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...
0
marktang
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,...
0
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...
0
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...
0
tracyyun
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...
0
agi2029
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,...
0
isladogs
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.