Random images as a background in HTML

A nice wee gem that Alex Peake informed me was possible. The problem: you want a randomly chosen image as a background but don’t want duplication in your css.

In your css file:

background-image: url('images/background.php');

Create the file referenced above with this code:

<?php
    $numofimages = count(glob("*.jpg"));
    $imagenum = rand(1, $numofimages);

    header("Content-Type: image/jpeg\n");
    header("Content-Transfer-Encoding: binary");

    $fp=fopen("headerimage". $imagenum .".jpg" , "r");
    fpassthru($fp);
?>

and voila, random images as a background with the bonus of being able to throw in a new image without having to do any more coding.

This code assumes that your images are called headerimageX.jpg where X is a number.

CSS is a pain UPDATE: sorted

Update 06/10/08: Got it sorted

CSS is a pain in the ass sometimes. Everything seems to be fine yet the main content is appearing below my sidebar instead of side by side. I am told that this is because one element is probably too big and is being pushed out of alignment. My sidebar is 200 pixels with a 600 pixel left margin and floated right. The content is 600 pixels wide with a 200 pixel right margin and is floated left.

This is why I’ll never be a web developer.

Yahoo User Interface

Yahoo has been kind enough to make all the code they use for designing their sites available to the public, from funky JavaScript stuff to core css. I use the fonts css to normalize the font on this site, looks nice and is a damn sight better looking than the default browser style.

Something I am going to play with is the grids system which lets you split up the page into sections with preset code. Looks really cool, will probably use it for making a theme from scratch for this site (for real this time). I’m pretty crap at explaining how it works so here’s a video from one of the developers for Yahoo.

Naked

My site ain’t broken, I’m just taking part in CSS Naked Day. The whole point is to promote web standards and good code. So enjoy my site in all its naked glory.