RSS
A particularly chic trend among the artsy parts of the internet is to hang a huge backdrop behind your content. There are four separate components required to make it look decent.
Huge backgrounds!
- Adjust the image so the edges blend into a solid color.
-
Attach the big image to the
<body>tag. - Give the content an opaque background, to maintain legibility.
- Pull in the margins so people must look at the big image.
The first one is done in your image editor and is beyond the scope of this brief tutorial. Here's the example used for this page: huge-backdrop.jpg. Note the body background color (set to match the edge of the image) and the margin setting (devoting a generous 15% of the left and right sides).
user.css:
body {
background: #B2BFC4;
background-image: url(resources/huge-backdrop.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 5% 15% 5% 15%;
}
Readability suffers where black text appears over the darker sections of the image. To correct this, add a background color to the main page wrapper. And just for kicks, some flair with the border.
user.css:
#wrapper {
background: #F0F0F5;
padding: 1em;
border-style: dotted;
border-width: 1px 1px 1px 1px;
border-color: #3C7AEC;
margin: auto;
}
Finally, tweak the liquid layout to keep the content pane from escaping into the margins.
user.css:
#content {
left: 0%;
width: 70%;
position: relative;
margin: auto;
}