Halten, hintergrund, Bild unten

Ich arbeite mit einer Lösung für die Aufbewahrung von Bildern ganz unten auf der Seite. Den code hab ich momentan habe ist:

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
    width: 100%;
    z-index: -101;
    bottom: 0;
}

Aber diese Probleme hat. Was ich bin mit dem Ziel für ein hintergrund, der bleibt am Boden und wird angezeigt, hinter dem alles andere (Daher die geringe z-index). Ich habe den folgenden code für das top Teil (Es gibt eine Mitte, das ist nur Farbe block, und nur dem body-Tag Hinzugefügt):

.background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600px;
    background-image: url('images/sky.png');
    background-position: center;
    background-repeat: repeat-x;
    z-index: -100;
}

Bitte beachten Sie: Der erste Teil funktioniert nicht (Es ist nicht auf der Unterseite), aber der zweite Teil hat (Er oben).

Wenn Sie möchten, besuchen Sie die Website, fühlen Sie sich frei, um: www.duffydesigns.co.uk/brough (Bitte nicht urteilen, es ist ein work in progress, nichts ist wirklich fertig!).

Danke für die Hilfe,

Joseph Duffy

Hinweis: ich bin mir sicher, dass Sie herausfinden können, der Obere Teil ist der Himmel, unten gras und Bäume.

InformationsquelleAutor Joseph Duffy | 2011-03-21

16

background-position nimmt zwei Argumente, ein x-Wert und einen y-Wert so zu positionieren Sie es an der Unterseite, die Sie verwenden würden: background-position: center bottom;. Benutzen Sie diese, um das erste Beispiel.

Gibt es einen Grund, dass Sie nicht den hintergrund, wie der hintergrund der body oder die html tag? Ich glaube, es ist offiziell erlaubt, hinter die html tag, aber ich habe nie gesehen, ein browser, wo es nicht funktioniert (noch nicht jedenfalls...).
- Ich habe vergessen, dass einfach, indem es der body würde auch ermöglichen es Ihnen, den rest des Körpers gefüllt mit Farbe. Danke! 🙂
- Sie sind herzlich willkommen! Durch die Art und Weise, die Sie hat, Ihre Frage css3 und css3 ermöglicht mehrere Hintergründe. Nur für den Fall.
InformationsquelleAutor jeroen
1

Wenn Sie möchten, dass ein hintergrund-Bild angezeigt wird, am unteren Rand der Seite, können Sie verwenden:
```
body {
    background-image: url(...);
    background-position: center bottom;
    background-repeat: no-repeat;
}
```
InformationsquelleAutor ChrisJ

Tun

<div class="background"></div>

.background {
    width:100%;
    height:90px;
    background:transparent url(...) repeat-x 0 0;
    position:fixed;
    bottom:0;

}

Check funktioniert beispielsweise bei http://jsfiddle.net/YGXxT/

InformationsquelleAutor Hussein

Wenn Sie wollen, dass es erscheinen ganz unten zu allen Zeiten (von der Seite, nicht das Fenster), verwenden Sie so etwas wie dieses, fügen Sie es in eine html-Datei zu sehen, bei der Arbeit, ändern Sie die Höhe der .test, um zu zeigen, dass es bleiben am unteren Ende des Fensters, wenn das Fenster nicht scrollen, sondern gehen weiter nach unten, wenn es funktioniert.

<html>
<head>
<style type="text/css">
    html, body{
        height:100%;
        margin:0;
        }
    #content{
        min-height:100%;
        position:relative;
        }
    #footer{
        background:green;
        width:100%;
        height:150px;
        margin-top:-150px;
        display:block;
        }
    .test{
        background:blue; 
        width:400px; 
        height:2000px; 
        opacity:.7; 
        color:#fff; 
        padding:20px;
        }
</style>
</head>
<body>
<div id="content">
    <h1>This is a page.</h1>
    <div class="test">this shows that things appear in front of the bg</div>
</div>
<div id="footer"></div>
</body>
</html>

InformationsquelleAutor Kevin D.

0

Hinzufügen min-height: 100% statt der height: 950px, dass deine div-Höhe notwendig. Zweitens, verwenden Sie position:fixed sperren, um das Hintergrundbild an der gleichen Stelle (zum scrollen).
- Sorry, mir war nicht klar, auf mein Ende. Ich wollte das Bild angezeigt wird, am unteren Rand der Seite, nicht auf die Ansichtsfenster, und die Obere von der Seite, nicht auf den viewport. Danke für die Hilfe, aber.
InformationsquelleAutor rsplak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.