Farbverlauf Grenze füllt nicht Header und Fußzeile Abschnitt

Question

Ich habe Probleme beim Einfügen eines Hintergrundbilds und damit meine Kopf- und Fußzeilenabschnitte einen Hintergrund mit Farbverlauf haben. Mein Hintergrundbild muss wiederholt werden. Muss sich das GIF-Bild im selben Ordner wie das CSS befinden? Das ist das CSS dafür.

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

ich auf einem linearen Gradienten arbeitete auch, die schwarz von weiß bis orange geht. Dieser Farbverlauf wäre dann der Hintergrund für die Kopf- und Fußzeilenabschnitte. Ich bin in der Lage zu teilen und bieten den Kopf- und Fußbereich einen linearen Hintergrund mit Farbverlauf, aber es reicht nicht bis zum Rand meiner Kopf- und Fußzeile. Dies ist der HTML-Abschnitt für den 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> 

Die CSS-Formatierung der HTML-I als

haben

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

Answer 1

Wie Sie in this example der Gradient zeigt in Ordnung und das Hintergrundbild sehen auch zeigt.

Beachten Sie: Auf einigen Browsern wird der Verlauf möglicherweise nicht angezeigt, aufgrund der Browserversion oder der Syntax.

So habe ich alle Präfixe für Gradienten so viele Brosers zu sein wie möglich unterstützt werden:

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

Weitere Informationen über Browser-Unterstützung Check this