2017-04-05 5 views
0

Ich habe Hintergrund, aber wenn ich Fußzeile machen das Hintergrundbild des Körpers erstreckt sich auf die Fußzeile; Wie kann ich diesen Hintergrund nur auf den Körper beschränken? Hier ist mein Code:Begrenzen Hintergrund Bild nur Körper

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background: #282828; 
 
    color: #fff; 
 
    padding-top: 20px; 
 
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50); 
 
    background-size: 400% 100%; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: Gradient 15s ease infinite; 
 
    -moz-animation: Gradient 15s ease infinite; 
 
    animation: Gradient 15s ease infinite; 
 
}
<div class="footer"> 
 
    <p>Posted by: asds</p> 
 
    <p>Contact information: <a href="mailto:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>

+0

ich kein Hintergrundbild sehen Sie? Wenn der Hintergrund des Körpers nicht angezeigt werden soll, legen Sie einen Hintergrund für die Fußzeile fest. – Slime

+3

Die Fußzeile ist Teil des "body". Wenn Sie also einen anderen Hintergrund für die Fußzeile wünschen, müssen Sie einen Hintergrund für die Fußzeile definieren. Alternativ, anstatt den Hintergrund auf den "body" zu setzen, erstellen Sie einen Container für den body-Inhalt innerhalb des body, der den Fußzeilencode nicht enthält, und wenden Sie den Hintergrund darauf an. – APAD1

Antwort

1

nur geben Sie Ihre Fußzeile eine Hintergrundfarbe. Die <body> standardmäßig Weiß versucht so

.footer { 
    background: #ffffff; 
} 

Natürlich Zugabe, werden Sie in dem Beispiel bemerken unten, dass der Hintergrund wieder an der Unterseite und Kanten. Sie können, wie APAD1 erwähnt, Ihre HTML-Struktur ändern, oder die Standard-Marge von <body> entfernen und Ihre Fußzeile einige mehr einstellen

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background: #282828; 
 
    color: #fff; 
 
    padding-top: 20px; 
 
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50); 
 
    background-size: 400% 100%; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: Gradient 15s ease infinite; 
 
    -moz-animation: Gradient 15s ease infinite; 
 
    animation: Gradient 15s ease infinite; 
 
} 
 

 
.footer { 
 
    background: #ffffff; 
 
}
<div class="footer"> 
 
    <p>Posted by: asds</p> 
 
    <p>Contact information: <a href="mailto:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>