dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
2108
share rss forum feed

StealthRider

join:2008-10-03

Convert 5 CSS files into one

Hello,
I need help converting this 5 CSS pages into one. this code changes the background depending on which day of the week it is. The code working but I need the html page to read from one .css file...

Html page:

[html]
[head]

[script]
var theme=""
function changeTheme()
{
var dt=new Date()
var day=dt.getDay()
if(day==0)
{
alert("here");
theme="theme1.css"
}

[!-- Sunday --]
if(day==1)
{
theme="theme2.css"
}

[!-- Monday --]
if(day==2)
{
theme="theme3.css"
}

[!-- Tuesday --]
if(day==3)
{
theme="theme2.css"
}

[!-- Wedsday --]
if(day==4)
{
theme="theme5.css"
}

[!-- Thursday --]
if(day==5)
{
theme="theme6.css"
}

[!-- Friday --]
if(day==6)
{
theme="theme7.css"
}

[!-- Saturday --]
if(day==7)
{
theme="theme8.css"
}

CSS Pages

theme1.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\1.jpg");
background-repeat:no-repeat;
}

theme2.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\2.jpg");
background-repeat:no-repeat;
}

theme3.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\3.jpg");
background-repeat:no-repeat;
}

theme4.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\4.jpg");
background-repeat:no-repeat;
}

theme5.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\5.jpg");
background-repeat:no-repeat;
}

theme6.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\6.jpg");
background-repeat:no-repeat;
}

theme7.css

body
{
background-image:
url("C:\Users\Test\Desktop\css\t.jpg");
background-repeat:no-repeat;
}


stray

join:2000-01-16
Warren, NJ

<?php
define('CSSPATH', 'template/css/'); //define css path
 
$cssItem = array(
    1 => "theme1.css",
    2 => "theme2.css",
    3 => "theme3.css",
    4 => "theme4.css",
    5 => "theme5.css",
    6 => "theme6.css",
    7 => "theme7.css",
);
?>
 
<html>
    <head>
        ....
        ....
        <?php $themeOfTheDay = $cssItem[date('N')]; ?>
        <link rel="stylesheet" href="<?php echo (CSSPATH . "$themeOfTheDay"); ?>" type="text/css">
    </head>
    <body>
        ...
        ...
    </body>
</html>
 
Of course my weeks have 7 days. Are you shutting down your server on Sat. and Sun.?

--
V-Rtifacts - When Virtual Reality Was More Than Virtual

StealthRider

join:2008-10-03

No I'm not. The server will be up 24/7 365


StealthRider

join:2008-10-03
reply to stray

Now I have to see if I can use this on PHP on their site. If not tanks any ways for the help....


StealthRider

join:2008-10-03
reply to StealthRider

Well I can't use php only HTML, CSS. Javascript.

Thanks



cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

1 recommendation

reply to StealthRider

Combine the css files into a single css file that's always included. For each theme/day, change the selector from just "body" to "body.monday", "body.tuesday", etc. Use javascript to dynamically set the class on <body> based on whatever criteria you want.

If your css files are more complicated then that, you can just expand out your selectors by having them start with body.monday. (e.g. body.monday div, body.monday a.someclass, etc).


StealthRider

join:2008-10-03

Thanks for the reply. I understand how this works just a little. If it not to much of a problem can you show me how this is done.



cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

Example

You'll need to adjust the styles as appropriate. Also, your example has paths relative to your c:. You'll need to change those for web paths. You can also just combine your rules into a single rule:

body{background: url('/your/path/file.jpg') no-repeat;}
 

StealthRider

join:2008-10-03

1 recommendation

Well I'm still not getting this. There is 7 different images which will change daily.

Can you like take the html code and the .css code and show me and I can following and do the rest. I have tried to set the class a number of ways. I understand I have to put the correct URL path. In the example it set up for 2 days and if you can show me how to do this, I can following and do the rest.

HTML:

[html]
[head]

[script]
var theme=""
function changeTheme()
{
var dt=new Date()
var day=dt.getDay()
if(day==0)
{
alert("here");
theme="theme1.css"
}

[!-- Sunday --]
if(day==1)
{
theme="theme1.css"
}

[!-- Monday --]
if(day==2)
{
theme="theme3.css"
}

document.getElementById("link1").href=theme
}
[/script]

[link id="link1" href="" rel="stylesheet" type="text/css"]
[/head]

[BODY onload="changeTheme()"]

[/body]
[/html]

CSS:

theme1.css

body
{
background-image:
url("C:\Users\Azero\Desktop\css\1.jpg");
background-repeat:no-repeat;
}

body
{
background-image:
url("C:\Users\Azero\Desktop\css\2.jpg");
background-repeat:no-repeat;
}


Screavics
Premium
join:2011-06-23
Pearcy, AR

2 edits

Here is my version that will change the theme based on the day just change the CSS code to what you want for each day. I built it in to the HTML code you can export it to a single file and ref it in the HTML.

Remove the br / day name if you like I did that for an example.

Also since you don't have PHP support and you have to do this with Javascript it will change the theme based on the users date. So to test each day you just change your own clock on your computer and refresh or re-open the page.

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Anthony Aldridge" />
 
<title>Theme Changer</title>
    
<style type="text/css">
#monday {
background-image:url( "./img/1.jpg ");
background-repeat:no-repeat;
}
 
#tuesday {
background-image:url( "./img/2.jpg ");
background-repeat:no-repeat;
}
 
#wednesday {
background-image:url( "./img/3.jpg ");
background-repeat:no-repeat;
}
 
#thursday {
background-image:url( "./img/4.jpg ");
background-repeat:no-repeat;
}
 
#friday {
background-image:url( "./img/5.jpg ");
background-repeat:no-repeat;
}
 
#saturday {
background-image:url( "./img/6.jpg ");
background-repeat:no-repeat;
}
 
#sunday {
background-image:url( "./img/7.jpg ");
background-repeat:no-repeat;
}
 
</style>
</head> 
    <script type="text/javascript">
var d = new Date();
var n = d.getDay();
var psj=0;
 
//Monday
if (n == '1'){
document.write('<body id="monday"><br />Monday')
}
 
//Tuesday
if (n == '2'){
document.write('<body id="tuesday"><br />Tuesday')
}
 
//Wednesday
if (n == '3'){
document.write('<body id="wednesday"><br />Wednesday')
}
 
//Thursday
if (n == '4'){
document.write('<body id="thursday">')
}
 
//Friday
if (n == '5'){
document.write('<body id="friday"><br />Friday')
}
 
//Saturday
if (n == '6'){
document.write('<body id="saturday"><br />Saturday')
}
//Sunday
if (n == '0'){
document.write('<body id="sunday"><br />Sunday')
}
</script>
 
</body>
</html>
 

StealthRider

join:2008-10-03

Thanks for the reply. I must have did something wrong. This what I did.

1. Created a folder called test.

2. Inside that folder i created a folder called img

3. I copied the code you provided and name it test.html

4. I place my 7 backgrounds in the folder img and name them 1.jpg - 7.jpg

when I launched test.html no background appeared.



Screavics
Premium
join:2011-06-23
Pearcy, AR

Try to remove the quotes from the background-image tag on Wednesday CSS and see if that helps.

Here is my working example you can view the source on it: »serverstrategies.com/dayrun.html

 
#wednesday {
background-image:url(img/3.jpg);
background-repeat:no-repeat;
}
 

StealthRider

join:2008-10-03

It worked. I just copied your code. My last question for now is that. I have 7 backgrounds designed and I would like to make sure they appear 100% of the screen or shall I say fit 100% of the screen size no matter what screen it is.



cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
reply to Screavics

said by Screavics:

Here is my version that will change the theme based on the day just change the CSS code to what you want for each day. I built it in to the HTML code you can export it to a single file and ref it in the HTML.

You're is far more complex then it needs to be, plus writing out the document.write with the body tag is a really bad practice. The whole page fails if javascript isn't enabled.

Here's a revised example: »jsfiddle.net/MB7sX/2/

<!DOCTYPE html>
<html>
    <head>
        <title>test page</title>
        <script type="text/javascript">
            window.onload = function () {
"use strict";
                document.body.className = "day" + (new Date()).getDay();
                //if you want to test this with different days of the week, uncomment
                //the line below and change the digit 0-6 (Sunday = 0)
                //document.body.className = "day0";
            };
        </script>
        <style type="text/css">
            body{background-repeat:no-repeat; }
            body.day0{background-image: url('http://www.lfvh.com/cn/images/background1.jpg'); }
            body.day1{background-image: url('http://www.lfvh.com/cn/images/background2.jpg'); }
            body.day2{background-image: url('http://www.lfvh.com/cn/images/background3.jpg'); }
            body.day3{background-image: url('http://www.lfvh.com/cn/images/background4.jpg'); }
            body.day4{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
            body.day5{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
            body.day6{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
        </style>                        
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec magna sed dolor semper viverra. Nam vestibulum neque et elit posuere sit amet suscipit felis sollicitudin.</p>        
    </body>
</html>
 

Uncomment the last javascript line to test various days, changing day0 (Sunday) to day1 (Monday) through day6 (Saturday). Delete those lines if you're done testing.


Screavics
Premium
join:2011-06-23
Pearcy, AR

cdru is correct I forget that a lot of people disable java script now and some browsers do by default.

I'm used to coding in an environment where group policy enabled java script on intranet sites by default.


StealthRider

join:2008-10-03
reply to cdru

Thanks to the both of you. Well all I need now is to be able to code this so that my background will be 100% to the screen size no matter what screen size it is.


StealthRider

join:2008-10-03
reply to cdru

When you get a chance I would like to get some help with the background and setting it to 100%. Seems that if you use fixed height 100% width 100% the background will repeat.

I guess what I'm looking for is to have it fit the screen only one image. I understand if it a small image it will stretch to fill up the screen.

I hope I explained this so that you can understand.

example I found but couldn't get it to work with your code:

www.onsitus.it/css-tutorials/sfo···percent/'

Thanks



Screavics
Premium
join:2011-06-23
Pearcy, AR

1 edit

Using cdru's method you can still keep your per day styling just going to have to remove the background-image tag from the day selection system because anything younger than CSS3 really cannot easily stretch images as a background-image. You end up having to stretch an image itself. CSS3 isn't fully supported by most browsers now so we just revert to another CSS image trick.

To keep this simple just rename your images to this:
Sunday -> img0.jpg
Monday -> img1.jpg
Tuesday -> img2.jpg
Wednesday -> img3.jpg
Thursday -> img4.jpg
Friday -> img5.jpg
Saturday -> img6.jpg

<!DOCTYPE html>
<html>
    <head>
        <title>test page</title>
        <script type="text/javascript">
            window.onload = function () {
            "use strict";
                document.body.className = "day" + (new Date()).getDay();
                //if you want to test this with different days of the week, uncomment
                //the line below and change the digit 0-6 (Sunday = 0)
                //document.body.className = "day0";
            };
        </script>
        <style type="text/css">
         body{
            background-repeat:no-repeat; 
         }
            body.day0{
                /*Put day specific styling for Sunday */
            }
            body.day1{
                /*Put day specific styling for Monday */
            }
            body.day2{
                /*Put day specific styling for Tuesday */
            }
            body.day3{
                /*Put day specific styling for Wednesday */
            }
            body.day4{
                /*Put day specific styling for Thursday */
            }
            body.day5{
                /*Put day specific styling for Friday */
            }
            body.day6{
                /*Put day specific styling for Saturday */
            }
#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
 
#image {
    width:100%;
    height:100%;
}
#content{
    position: relative; 
    z-index: 1;
}
 
        </style>                        
    </head>
    <body>
 
        
            <div id="background">
    <img id="image" />
<script type="text/javascript">
    document.getElementById('image').src = "img/img"+(new Date()).getDay()+".jpg";
</script>
 
    </div>
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec magna sed dolor semper viverra. Nam vestibulum neque et elit posuere sit amet suscipit felis sollicitudin.</p>
    </div>
               
    </body>
</html>
 

FYI: I could minify the CSS code but choose not to so you can understand the code easier. A good code minifier is here »www.minifycss.com/css-compressor/ it helps save bandwidth and is really good for those of us on slower connections like dialup etc. It's all dependent really on who you want to reach out and touch with your website.

Oh and here is my working example of what this is: »serverstrategies.com/dayrun3.html

StealthRider

join:2008-10-03

WOW thats what I was looking for. Well sorry I should have mention this first.

I might not be able to host my images where the html code is. What if:

how does this change your code...

My site where the html code is here:

dummy.com

My images are here:

reallydumb.com

reallydumb.com/img/1.jpg
reallydumb.com/img/2.jpg
reallydumb.com/img/3.jpg
reallydumb.com/img/4.jpg
reallydumb.com/img/5.jpg
reallydumb.com/img/6.jpg
reallydumb.com/img/7.jpg

StealthRider

join:2008-10-03

I think I got it. This is what I changed:

document.getElementById('image').src ="http://reallydumb.com/img/"+(new Date()).getDay()+".jpg";



Screavics
Premium
join:2011-06-23
Pearcy, AR

That should work ok

If you wanted just [daynumber].jpg you would need to do this one:

document.getElementById('image').src ="http://reallydumb.com/img/"+(new Date()).getDay()+".jpg";
 
This one is 0.jpg for Sunday and proceeds on for each day.

You can really name anything you want by doing:
document.getElementById('image').src ="http://reallydumb.com/img/background_"+(new Date()).getDay()+".jpg";
 
that would make it backgroud_0.jpg for Sunday etc

If you wanted to use a different file type you can change the extension:
document.getElementById('image').src ="http://reallydumb.com/img/"+(new Date()).getDay()+".png";
 
This one would be 0.png for Sunday and proceed on as each for that extension.

Sorry it's taking me so long to respond. Been having to help the wife with stuff around the house.


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
reply to Screavics

said by Screavics:

<img id="image" />
<script type="text/javascript">
document.getElementById('image').src = "img/img"+(new Date()).getDay()+".jpg";
</script>

I would change the image tag so that it had a default image presuming the images are suitable to be shown on any day. Again if javascript is disabled...

StealthRider

join:2008-10-03

3 edits
reply to cdru

cdru,
I'm back for more help. This is the code that I'm using and seems to work better than the other codes you provides me. I need to have this code make my background image 100% of the screen. The other code worked but the site I'm using not so user friendly.

<!DOCTYPE html>
<html>
    <head>
        <title>test page</title>
        <script type="text/javascript">
            window.onload = function () {
                "use strict";
                document.body.className = "day" + (new Date()).getDay();
                //if you want to test this with different days of the week, uncomment
                //the line below and change the digit 0-6 (Sunday = 0)
                //document.body.className = "day0";
            };
        </script>
        <style type="text/css">
           
            body.day0{background-image: url(img/1.jpg); }
            body.day1{background-image: url(img/2.jpg); }
            body.day2{background-image: url(img/3.jpg); }
            body.day3{background-image: url(img/1.jpg); }
            body.day4{background-image: url(http://mydomain.com/upload/img/4.jpg); }
            body.day5{background-image: url(img/5.jpg); }
            body.day6{background-image: url(img/5.jpg); }
        </style>                        
    </head>
    <body>
                
    </body>
</html>..
 


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

said by StealthRider:

cdru,
I'm back for more help. This is the code that I'm using and seems to work better than the other codes you provides me. I need to have this code make my background image 100% of the screen. The other code worked but the site I'm using not so user friendly.

What browser(s) and versions are you targeting? As mentioned above, if IE8 or earlier of a a concern, the answer will differ then if you are using a browser that supports CSS3.

StealthRider

join:2008-10-03

2 edits

I'm using IE9. Is there any way to target all browsers? If not, I'm not sure which one to target. This site is being set up for my wife, which she will use for her photography business. Let me do this. Here is the link to the page I'm working on '»www.nobleambiencephotography.com/..' and using code provided below: Takes a little time for the BG to load because where the images is hosted.

This is the way I have to enter the codes:



<!DOCTYPE html>
<html>
    <head>
        <title>test page</title>
        <script type="text/javascript">
            window.onload = function () {
                "use strict";
                document.body.className = "day" + (new Date()).getDay();
                //if you want to test this with different days of the week, uncomment
                //the line below and change the digit 0-6 (Sunday = 0)
                //document.body.className = "day0";
            };
        </script>
        <style type="text/css">
           
            body.day0{background-image: url(img/1.jpg); }
            body.day1{background-image: url(img/2.jpg); }
            body.day2{background-image: url(img/3.jpg); }
            body.day3{background-image: url(img/1.jpg); }
            body.day4{background-image: url(http://aliciashannondesigns.com/blaqcabinet/img/4.jpg); }
            body.day5{background-image: url(img/5.jpg); }
            body.day6{background-image: url(img/5.jpg); }
        </style>                        
    </head>
    <body>
                
    </body>
</html>
 


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

<!DOCTYPE html>
<html>
    <head>
        <title>test page</title>
        <script type="text/javascript">
            window.onload = function () {
                "use strict";
                document.body.className = "day" + (new Date()).getDay();
                //if you want to test this with different days of the week, uncomment
                //the line below and change the digit 0-6 (Sunday = 0)
                //document.body.className = "day0";
            };
        </script>
        <style type="text/css">
            html,body{height:100%;width:100%;margin:0;padding:0;}
            body{background: no-repeat top left fixed;background-size: cover;}
            body.day0{background-image: url('http://www.lfvh.com/cn/images/background1.jpg'); }
            body.day1{background-image: url('http://www.lfvh.com/cn/images/background2.jpg'); }
            body.day2{background-image: url('http://www.lfvh.com/cn/images/background3.jpg'); }
            body.day3{background-image: url('http://www.lfvh.com/cn/images/background4.jpg'); }
            body.day4{background-image: url('http://aliciashannondesigns.com/blaqcabinet/img/4.jpg'); }
            body.day5{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
            body.day6{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
p{color:#fff;}
        </style>                        
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br />Lorem ipsum dolor sit amet,<br /></p>        
    </body>
</html>
 

The above code will scale the image to guarantee that the screen will have 100% background image coverage and the aspect ratio maintained. If the image does not fit properly, the smaller dimension will be an exact fit and any excess of the larger dimension will be cropped off.

You can change the "top left" on the second css line to any position (e.g. center center, bottom right, etc) to assigned where the fixed point is. If you chose "center center", then equal parts from top/bottom or left/right could be cut off. This would be suitable for example a image of scenery where the outside edges aren't as important as the center. However for your sample image of the woman's face, since she's in the top left then you'd probably want to keep it as is so that her head wouldn't be cut off at lower resolutions.

StealthRider

join:2008-10-03
reply to StealthRider

How would I make this happen with the code I'm using? I have also notice that the page noe flicker when I click on a link.

www.nobleambiencephotography.com'

Change the image tag so that it had a default image presuming the images are suitable to be shown on any day. Again if javascript is disabled



cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

said by StealthRider:

Change the image tag so that it had a default image presuming the images are suitable to be shown on any day. Again if javascript is disabled

This was only necessary if you were going with an image tag absolutely positioned. Basically the <img> should always have a scr, even if you immediately assigned a different value via javascript. If javascript is disabled, an image would still be shown. Otherwise, no background image would be shown (as well as your page not technically being valid (X)HTML.

If you're using my version of the code, it's not necessary as the image is being applied to the body element, not a separate img tag.

I have also notice that the page noe flicker when I click on a link.

It's the page loading. It loads the HTML and once the page reaches the onready stage, then the background loads. You can attempt to eliminate a delay by deleting the window.onload function in the header and moving the line that starts "document.body.className = " into it's own script block immediately after the body tag.

StealthRider

join:2008-10-03

Is this correct?

<head> 
<title>test page</title> 
<script type="text/javascript"> 
{ 
"use strict"; 
//if you want to test this with different days of the week, uncomment 
//the line below and change the digit 0-6 (Sunday = 0) 
//document.body.className = "day0"; 
}; 
</script> 
<style type="text/css"> 
html,body{height:100%;width:100%;margin:0;padding:0;} 
body{background: no-repeat top left fixed;background-size: cover;} 
body.day0{background-image: url('http://www.lfvh.com/cn/images/background1.jpg'); } 
body.day1{background-image: url('http://www.lfvh.com/cn/images/background2.jpg'); } 
body.day2{background-image: url('http://www.lfvh.com/cn/images/background3.jpg'); } 
body.day3{background-image: url('http://www.lfvh.com/cn/images/background4.jpg'); } 
body.day4{background-image: url('http://aliciashannondesigns.com/blaqcabinet/img/4.jpg'); } 
body.day5{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); } 
body.day6{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); } 
p{color:#fff;} 
</style> 
</head> 
<body> 
 document.body.className = "day" + (new Date()).getDay(); 
 
</body> 
</html
 


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

html code:

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{background: no-repeat top left fixed;background-size: cover;}
body.day0{background-image: url('http://www.lfvh.com/cn/images/background1.jpg'); }
body.day1{background-image: url('http://www.lfvh.com/cn/images/background2.jpg'); }
body.day2{background-image: url('http://www.lfvh.com/cn/images/background3.jpg'); }
body.day3{background-image: url('http://www.lfvh.com/cn/images/background4.jpg'); }
body.day4{background-image: url('http://aliciashannondesigns.com/blaqcabinet/img/4.jpg'); }
body.day5{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
body.day6{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
</style>
</head>
<body>
<script type="text/javascript">
document.body.className = "day" + (new Date()).getDay();
</script>
</body>
</html>