Creating a transparent gap between header and page content - html

Question

I'm using Wordpress and the twentythirteen theme. What I'm trying to achieve is to create a 30px gap between the header and the page content.
Here's a webpage that has what I'm talking about: http://wp-themes.com/elisium/
When I add marging or padding, it only adds some white space instead of showing the background picture. I tried some reverse engineering, on the site mentioned above and it seems that the gap is created by <div class="clearbig">. I looked up its CSS code but it isn't of much help:
.clearbig {
clear:both;
height:10px;
}
To avoid copying huge portions of code here, I set up a website for testing purpose:
http://mywptestsite.is-great.org
So how do you create this gap?

Answer 1

Try to delete background-color: #fff from .site class and add it (background-color: #fff) to .site-main class

Answer 2

it's because you wrapped all of your content in #page which has a white background. What you need to do is take your header out of that div and then you can create that space you want. You'll have to do soemthing like this:
<header id="masthead" class="site-header" role="banner">
//stuff in here
</header>
<div id="page" class="hfeed site">
//rest of your content
</div>
Also you'll have to set a width on your header since it wouldn't be held inside that container. That way setting the auto on the left and right margins will center your content.