How To Add Wallpaper To Your Second Monitor
The Method
Stage 1
First I will give you the code you need, all you have to do is copy and paste it into a new text file and name the file 'wall.htm' to save it as an html file and be sure to save it in the same directory as the pictures you want as wallpaper.
<html>
<head>
<title>Dual Monitor Wallpaper</title>
</head>
<body>
<img src="pic1.jpg" style="position:absolute; left:0; top:0; width:1024; height:768px">
<img src="pic2.jpg" style="position:absolute; left:-800px; top:0; width:800px; height:600px">
</body>
</html>
Take note of the resolutions that your monitors are in and which is your main monitor (the one with the start button on it). You will need these to set the position of the pictures and the height and width of them (unless you have already pre-scaled them to fit each monitor). On my system I have two different size monitors so I use 800 x 600 on my secondary monitor which I have on the left and 1024 x 768 on my primary monitor.
The Method
Stage 2
Okay, now you have the text file in front of you let's edit it to suit. You will only really need to edit the image code. I will show you the code and all you have to do is edit the bits you need to.
<img src="pic1.jpg" style="position:absolute; left:0; top:0; width:1024px; height:768px">
We will start with the primary monitors picture and I will explain each part of the CSS code.
First alter the pic1.jpg text to the name of your picture (unless you have called it the same).
For the primary picture the first 3 CSS instructions are probably not needed, but for the sake of neat code and to stop weird things happening its better to be safe than sorry.
- position:absolute - this code you won't have to change but it is necessary, if you don't include it the CSS will just ignore the next two commands.
- left:0 - this tells the picture to start displaying at the number after the colon, in this case it is the very left of the primary monitor.
- top:0 - this tells the picture to start displaying at the very top of the screen.
- width:1024px - this forces the picture to be 1024 pixels wide, this is very good for forcing the size of the picture. Edit the number to the width of your primary monitor, i.e. if you are using 800 x 600 for your primary monitor size alter this figure to 800.
- height:768px - just as in number 4 this forces the pictures width, alter to suit.
Another thing to remember with the CSS code is to make sure each command is separated with a semi-colon (which it is so don't delete them by mistake when editing the code).
Now onto editing the code for your secondary monitor. Start by changing the picture name as you did for the primary monitor.
To recap the code for second picture I will put it below to stop you having to scroll up to see it.
<img src="pic2.jpg" style="position:absolute; left:-800px; top:0; width:800px; height:600px">
- position:absolute - again this bit is essential so leave it alone.
- left:-800px - as I said before my secondary monitor is on the left so the leftmost part of the picture needs displaying at minus whatever the screen width is of the secondary monitor, in my case it is 800 therefore I set mine at -800px. If your secondary monitor is on the right of your primary monitor then you need to set this figure to width of your primary monitor, i.e. if your primary monitor is 1024 x 768 set this figure to 1024px.
- top:0 - as before this starts the picture displaying at the top of the screen.
- width:800px - to recap set this to the secondary monitors width.
- height:600px - and this to the secondary monitors height.
Right, that is the code done so save the changes and again check that you haven't deleted any of the semi-colons from the CSS code.
The Method
Stage 3
Click on the Settings tab, select your second monitor and ensure that there is a tick in the 'Extend my Windows desktop onto this monitor'.
Click on Desktop tab then browse for your HTML file and apply. If all has gone to plan you should now have two separate background images one for each monitor. If it didn't work go back and check over your work.
Please note I did this on a Windows XP PC, but I don't see why it shouldn't work on any other system (including an Apple Mac) as HTML and CSS is a universal language.
The Final Word
I hope you found this information useful. Leave any miscellaneous comments here.
sean wrote
maybe im doing something wrong but these instructions seems incomplete to get it to work with Vista
Posted April 04, 2009
Evelyn_Saenz wrote...
Will come back when we have two or more monitors. Sounds great!
Posted November 13, 2008
Nemon wrote
Brilliant, thanks!
Posted August 08, 2008
Arizona-Snow wrote...
To John (and anyone else who has trouble):
I assure this does work on a two monitor system (and should work on a 3 monitor system too if you repeat the second lot of instructions on stage 2 for each monitor). If you go wrong or get weird results all you have to do is to repeat stage 3 and replace the html file with a normal background picture.
I do realise that the instructions are a little on the technical side but if you still want it to work start again from the start and maybe you will be able to figure out where you went wrong.
Posted July 15, 2008
by Arizona-Snow
I am the webmaster of Knoll House Interforum.
My hobbies include Online Games, Fantasy Novels good Televison and programming my website.
(more) 
