Градиентная граница не заполняет раздел заголовка и нижнего колонтитула

Question

У меня возникают проблемы с вставкой фонового изображения, и в моих разделах заголовка и нижнего колонтитула есть градиентный фон. Мое фоновое изображение должно повторяться. Должно ли изображение .gif находиться в той же папке, что и css? Для этого это css.

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

Я также работаю над линейным градиентом, который идет от белого до оранжевого в черный. Тогда этот градиент будет фоном для разделов заголовка и нижнего колонтитула. Я могу разделить и предоставить раздел заголовка и нижнего колонтитула линейным градиентом, но он не распространяется до границы моего верхнего и нижнего колонтитула. Это раздел HTML для заголовка

<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> 

CSS-код форматирования HTML я имею в

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

Answer 1

Как вы можете видеть в this example градиент показывает отлично и фоновое изображение также показывает.

Знайте, что: В некоторых браузерах градиент может не отображаться из-за версии браузера или синтаксиса.

Таким образом, я использовал все префиксы для градиента, чтобы быть как можно больше brosers, насколько это возможно, поддерживаются:

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%); 

Более подробную информацию о браузере проверки поддержки this