Go wild and make your website background an image or video

I love “mounting” my websites on background images. It adds depth and used properly it can enhance the whole user experience or take a relatively simple site and make it appear so much better and of a much higher quality.

So – I typically find a rights free image – one of my own photos or buy a nice high quality image to go on the site background. (You can see one I did here for my local irish football team –  Arctic Spas or on Costa Gaels)

To do this its REALLY simple.

Under the opening body tag in wordpress header.php – just add this little line of script:

<img src=”” alt=”Hot Tubs by Arctic Spas” class=”bg”>

<img class=”bg” src=”<?php echo get_bloginfo(‘stylesheet_directory’);?>/images/imagename.jpg” />

Change imagename.jpg to your actual imagename and extension in the line above.

Then add this snippet of CSS to your style.css file:

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -100;

I originally got this from the brilliant CSS-tricks.com website and you can see a full explanation of this technique and a few other variations here.

All good right? Nice! Then I got an email from a friend who got me thinking that maybe I could change the image to an animation… but they didn’t say animation – they said VIDEO. (it’s coming up to Christmas and they suggested falling snow or something similar) and that got me to thinking!

A few searches later and I cam across this code. Again, just add this in the header.php of your wordpress site after the opening body tag:

Now just change the words “youtubeid” to the id on the youtube video you want to add in.

*Note – I have no working example of this right now as I’m still refining the code and figuring some things out, but read on!

So, for example, if I wanted to add this video:


Now simply change youtubeid to RuqVnqNPyC0 and it works quite nicely.

Just an explanation of some parameters in the script:


This tells the video to autoplay (set to 1 for show) that the video controls, play/pause and the loading bar, should be hidden (set to 0 for hidden) show the video info is hidden (set to 0 for hidden) and autohide is set to disappear (set to 1 so they disappear after the video begins playing – which is automatic so it’s almost immediately)

The problem that you will encounter is of course that the videos have to be quite long and if they have audio then that will play as well so this isn’t ideal unless you produce the perfect video yourself.

As I was playing with the video above I wanted it to loop continually as well (even though its ten minutes long!) so by adding in &loop=1 to the parameters I “should” keep rolling – but this hasn’t bloody worked for me so I’m still fiddling with it so if you make it happen then let me know ( or I will update this post, whichever comes first!), this means that right now I’m getting the end of video suggestions and whatnot so I hope to figure out how to avoid that also.

A full list of the parameters available for playing around with is in this nice little list here: https://developers.google.com/youtube/player_parameters

The original code came from the site Labno. Thanks!

Using a Vimeo Video

As a further step I decided to see how Vimeo worked with this little exercise. So lets try this one.


1. Click the share button the top right of the video and wait for the poop up to appear.

2.On the embed line click more options.

3. At the bottom click the loop video and (4.)auto play to add the parameters similar to the ones I described above.

5. You may notice a tiny little link at the bottom of the pop up saying “use old embed code” – but I stuck with the new one (for now!) and got it working using this script below.

6. Copy the embed code and add it to the script below from <iframe to iframe>


And your sorted.  Again – I m playing n with this code at the moment and working on the Vimeo embed parameters (all available in another nice little list right here: http://developer.vimeo.com/player/embedding) top try to achieve things like removing the “widescreen” effect in the video so no black bars appear and getting it to loop etc. But haven’t quite finished that off just yet. Feel free to pipe in if you find a solution for it!

And there ya go, not really anything ground breaking or whatever but it might make for something a little different on your site and better that you know you can do it!