Gradient border doesn't fill header and footer section

Question

I am having problems inserting a background image and making my header and footer sections have a gradient background. My background image has to repeat. Does the .gif picture have to be in the same folder as the css? This is the css for it.

body {
    background-image: url("folder1/pic.gif");
    background-repeat: repeat-x repeat-y;
}

I am also working on a linear gradient that goes from white to orange to black. This gradient would then be the background for the header and footer sections. I am able to split and provide the header and footer section a linear gradient background but it does not extend all the way to the border of my header and footer. This is the html section for the header

<header>
    <div id="eg1">
        <img src="images/pumpkin.gif" alt= "pumpkin" height="78" width="85">
        <h1>The Halloween Store</h1>
        <h3>For the little Goblin in all of us!</h3>
    </div>
</header>

The css formatting the html I have as

/*gradient header*/
#eg1 {
    background-image: -webkit-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
}

Answer 1

As you can see in this example the gradient shows fine and the background image also shows.

Be aware : On some browsers the gradient may not appear because of the browser version or the syntax.

So I used all the prefixes for gradient to be as many brosers as possible are supported:

  background-image: linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -webkit-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -moz-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -o-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);

For more about browser support check this