Is is possible that this image changes with each page, but not randomly?

This code will change out the image. To limit it to a specific page, you would need to check the page source of the page you'd like to use it on and add the page ID to the front of the selector. For example, you would change "#masthead .thumbnail img" to "#page-id-2 #masthead .thumbnail img".

#masthead .thumbnail img {
	display: none;
}

#masthead .thumbnail {
	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
	width: 176px;
	height: 145px;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	transition: background 0.3s ease;
}
#masthead .thumbnail:hover {
	background: red;
	width: 176px;
	height: 145px;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: .9;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

This code is a slightly different example I came up with while testing stuff out. It uses two images instead of leaving one as a background color and the effect with the example logo images I used turned out kinda cool:

#masthead .thumbnail img {
	display: none;
}

#masthead .thumbnail {
	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
	width: 176px;
	height: 145px;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	transition: background 0.5s ease;
}
#masthead .thumbnail:hover {
	background: url(http://s.wordpress.org/about/images/wordpress-logo-simplified-bg.png) no-repeat;
	width: 176px;
	height: 145px;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: .9;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	transition: background 0.5s ease;
}

These examples should help get you started. Note that you can take these and try changing around the options to get different effects.

The background is currently black and I get a fine line on the left edge and I also don't like it becoming a black square when I mouseover.

I don't see the line on the left edge on the demo site http://thecolumnistdemo.wordpress.com/ and it looks like http://helenawillesdesign.wordpress.com/ is currently using the Bueno theme, so I can't find where you're seeing that. If you still need help, please post a link to where the problem is happening.

How can I change the size, background colour and mouseover behaviour for the image in the top left hand corner?

To change the background color for the image in the top left corner of The Columnist theme, add this to your Appearance → Custom Design → CSS editor:

#masthead .thumbnail {
	background-color: yellow;
}

Change the "yellow" color name to a color code of your choice:
http://automattic.github.com/Iris/

Here is a CSS example of changing the size:

#masthead .thumbnail,
#masthead .thumbnail img {
	width: 200px;
	height: 200px;
}