at the moment on my site i have the text for my banner as a transparent png defined in the html file:
<div id="banner">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="1024">
<tbody><tr>
<td>
<center><img src="images/banner.png" border="0" height="165" width="746"></center>
</td>
</tr>
</tbody></table>
</div>
and the background image specified in the css as the background image for <div>:
#banner {
background: url(images/bannerback.jpg) no-repeat right top transparent;
display: block;
margin: 0 auto;
}
the banner is made to be too big for any screen, then this placed in the css to stop scrolling:
body {overflow-y:auto;}
this is because i need the background to fit any window size, but the text to remain in the centre of the page
my problem is that now i want to implement banner rotation, so that there is a different random background
each time the page loads. I was planning to do this with javascript but because the background is controlled
by css i don't know how to do this while still having the background to fit any window width.
can anyone help me?
Full Version: A Little Css Problem
Can you post your website link please so i can see.
http://dawnsrising.clanteam.com
just a little extra info, it works through php, that loads from a single html template page.
just a little extra info, it works through php, that loads from a single html template page.
So basically you want to have random backgrounds everytime the page loads but because you have set background properties using css you don't know how to do it keeping the same css properties?
Am i right or wrong?
Am i right or wrong?
thats about it, yes
Do you want the actual page background to change or the banner to change?
the banner
Ok, you could do something like this (not tested).
Taken from http://www.crowes.f9.co.uk/Javascript/bgrnd.htm
CODE
<html>
<head>
<title>Some Title</title>
<script language="Javascript">
function bkgrnd () {}; bg = new bkgrnd (); n = 0
bg[n++] = "images/Bg.gif"
bg[n++] = "images/Bg1.gif"
bg[n++] = "images/Bg2.gif"
rnd = Math.floor(Math.random() * n);
tmp = '<img src="'bg[rnd]+'">
//--></script>
</head>
<body>
<div id="banner">
<script language="Javascript">
<!--
document.write( tmp )
//-->
</script>
</div>
</body>
</html>
<head>
<title>Some Title</title>
<script language="Javascript">
function bkgrnd () {}; bg = new bkgrnd (); n = 0
bg[n++] = "images/Bg.gif"
bg[n++] = "images/Bg1.gif"
bg[n++] = "images/Bg2.gif"
rnd = Math.floor(Math.random() * n);
tmp = '<img src="'bg[rnd]+'">
//--></script>
</head>
<body>
<div id="banner">
<script language="Javascript">
<!--
document.write( tmp )
//-->
</script>
</div>
</body>
</html>
Taken from http://www.crowes.f9.co.uk/Javascript/bgrnd.htm
QUOTE(Banjo @ May 29 2008, 08:50 PM) 
Ok, you could do something like this (not tested).
Taken from http://www.crowes.f9.co.uk/Javascript/bgrnd.htm
CODE
<html>
<head>
<title>Some Title</title>
<script language="Javascript">
function bkgrnd () {}; bg = new bkgrnd (); n = 0
bg[n++] = "images/Bg.gif"
bg[n++] = "images/Bg1.gif"
bg[n++] = "images/Bg2.gif"
rnd = Math.floor(Math.random() * n);
tmp = '<img src="'bg[rnd]+'">
//--></script>
</head>
<body>
<div id="banner">
<script language="Javascript">
<!--
document.write( tmp )
//-->
</script>
</div>
</body>
</html>
<head>
<title>Some Title</title>
<script language="Javascript">
function bkgrnd () {}; bg = new bkgrnd (); n = 0
bg[n++] = "images/Bg.gif"
bg[n++] = "images/Bg1.gif"
bg[n++] = "images/Bg2.gif"
rnd = Math.floor(Math.random() * n);
tmp = '<img src="'bg[rnd]+'">
//--></script>
</head>
<body>
<div id="banner">
<script language="Javascript">
<!--
document.write( tmp )
//-->
</script>
</div>
</body>
</html>
Taken from http://www.crowes.f9.co.uk/Javascript/bgrnd.htm
thankies
Does it work?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.