Hi i wonder if you can help me i try to load a different background on my client website like every time the user click the refresh button a different background image display like this website
Thank You
amarula25 0 Newbie Poster
colweb 13 Posting Whiz
It seems you have already solved it. In Firefox 3 under Linux I do get a new background image when pressing F5 or the refresh button.
amarula25 0 Newbie Poster
colweb 13 Posting Whiz
My mistake. Have looked again at the madonna site and still don't know how they do it there, but below is the way I do it. Tested with IE 6 and Firefox (2 and 3).
The background image is fixed on the right site and will not scroll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>
</head>
<body class="bg">
<p>Some text</p>
<!-- put a lot text lines here to see that the background stays fixed. -->
<p>Some text</p>
</body>
</html> amarula25 0 Newbie Poster
Now that i think about it its like every time you refresh, a whole different page is coming up. so i think a random page script will help can someone help me with this please?
colweb 13 Posting Whiz
Now that i think about it its like every time you refresh, a whole different page is coming up. so i think a random page script will help can someone help me with this please?
I can't see what you mean with "a whole different page is coming up".
Didn't you want a background that behaves the same as the way the madonna site is doing it. That is, a background top-right that doesn't scroll when you scroll the page?
My script is exactly doing that. If you put the rest of you content between the <body class="bg"> and </body> tags, the only thing that changes when refresh the page is the background.
amarula25 0 Newbie Poster
i will try that thanx
amarula25 0 Newbie Poster
it work like a dream thank you very much
bcadam 0 Newbie Poster
thanks colweb for the code but this is for the page, is there a way to put this code into my stylesheet .css files so that it applies to all pages that pull it.
amarula25 0 Newbie Poster
The css thing can also work but i am not fimiliar with the css thing.
colweb 13 Posting Whiz
bcadam,
It's very easy. For every page on your site where you want to use this background you load the javascript and css from files, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The title of your page</title>
<script type="text/javascript" src="/scripts/background.js"></script>
<link rel="stylesheet" type="text/css" href="/css/backgroud.css"></link>
</head>
<body class="bg">
<!-- the rest of your content goes here -->
</body>function changeImg(imgNumber) {
var myImages = ["images/image0jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;background.css
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}Don't forget to press the solved button.....
MoShapes 0 Newbie Poster
I know this is old but I need help!!! I have tried many many script codes and just can't get the background to change on a refresh. What's wrong with my code?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Blissful Chocolatiers -</title>
<!-- TemplateEndEditable -->
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["..images/main_background.png", "..images/main_background2.png", "..images/main_background3.png", "..images/main_background4.png"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="../css/navbar.css" rel="stylesheet" type="text/css" />
<!-- TemplateParam name="OptionalRegion1" type="boolean" value="true" --><!-- TemplateParam name="OptionalRegion2" type="boolean" value="true" -->
</head>
Hipolito 0 Newbie Poster
there is any script to load a different html instead jpg file?
i put some html files and the load a random file?
JorgeM 958 Problem Solver Team Colleague Featured Poster
The user is going to access your website by hitting a specific web page. What you can do is redirect the user to a random page on your site.
There was a similar recent discussion about redirecting and random pages. Take a look: http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/467181/delayed-auto-redirect-to-a-random-url.-just-a-little-help-needed
vjproduction 0 Newbie Poster
you can also try jquery plugins, especially if you want some additional functionalities and styling beside randomizing images on load.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.