Background image pack for Variant Whitespace

Post 186 of 262

Want to change the visual appearance of the Variant Whitespace template without having to edit any code at all? Then try replacing the default background images, it can make a significant difference. I have created a package with six replacement backgrounds in 3 different styles (original layout + reversed layout for each style) that you can try.

To download the backgrounds and a .PSD source file that makes it possible to modify the styles, use this link: (3.29 Mb)


, ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.


Pollyanna DarlingJanuary 21, 2011 at 00:09Reply

Hi Andreas – I love your work and am currently constructing a site using Variant Whitespace. How can I put a picture next to the title. Have fiddled around with tables but still can’t get it right. If you go to you will see what I mean!!!!
Thanks again for your beautiful templates.

Andreas ViklundJanuary 21, 2011 at 01:07Reply

One way would be to paste the image into the background image. It can of course also be done using an img tag in the HTML, but using tables for content layout purposes is something I would never recommend.

If you don’t want to put the picture in the background, I can write a tutorial blog post about inserting a photo (or a logo) beside the title in the Variant Whitespace template. It could be useful for many sites, so it would be a good topic for a step-by-step guide.

harry hkmusicJanuary 22, 2011 at 19:29Reply

Hey Polyanna,
just insert these lines into the ccs-file:
#header img {float:right; border:0px; margin-right:220px; margin-top:30px;}

and link your image in your htm-file in front of the header h1. It works.
And don´t use tables.
@Andreas: Thanks for your work. I just studied your photoshop stuff to learn about.
Regards Harry