Graphic Background with Whitespace for Text
This week I’m presenting a workshop, Creating an Impressive Writing Website, at the 2008 Muse Online Writers Conference. One of the participants wanted the code for a web page with a graphic in the background, and whitespace for the text area.
I am a whitespace fanatic, especially for professional websites.
Anyhow, here’s the code I gave her. I’m putting it here in case someone else might need it.
Click here to see the result of using this code
You’re welcome to take this and use it in any way that suits your needs:
<html>
<head>
<title>YOUR TITLE</title>
<style>
body {
background: url(http://www.lindajomartin.com/images/ybg.gif)repeat;
font-family: arial,helvetica,sans-serif;
font-size: 1em;
}
div.whitespace {
background-color:white;
border: 2px #000000 solid;
margin: 150px;
padding: 30px;
}
</style>
</head>
<body>
<div class=”whitespace”>
<p>Put your main text here.</p>
</div>
</body>
</html>