it-swarm.com.de

Wie kann ich ein Hintergrundbild scrollen und nicht auf der Seite kacheln?

Ich habe ein Hintergrundbild für meine Website, und wenn ich das Bild in HTML importiert habe, wird es über die Seite gekachelt und an derselben Stelle angehalten. Wie kann ich die Größe des Bildes ändern, um das Fenster auszufüllen, und die Seite nach unten scrollen, sodass der Text und die Inhalte nur auf der Seite nach oben zu wandern scheinen? Ich habe den Code in Ihrer Antwort verwendet und das Bild wird angezeigt und ist nicht gekachelt, aber es wird auf der Seite wiederholt, anstatt nach unten zu scrollen.

<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
    background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed; 
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

Da ist das Skript, das ich benutze.

9
ThunderToes

* Aktualisiert mit jsFiddle: http://jsfiddle.net/q5WKg/1/

So verhindern Sie, dass sich der Hintergrund wiederholt, den Sie in Ihrem CSS ausführen möchten:

background-repeat:no-repeat;

Um den Hintergrund immer ausfüllen zu lassen, verwenden Sie die Eigenschaft css3:

background-size: cover;

Da es nicht weit verbreitet ist, müssen Sie wahrscheinlich Herstellerpräfixe verwenden:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Zusätzlich zu Ihren Kommentaren würde es in etwa so aussehen:

<style type="text/css">
html
{
    background-image: url('path/to/imagefile.jpg'); 
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
</style>

Wenn sich Ihr Hintergrundbild im HTML-Element befand.

* Update 2

Ich würde Ihren Code oben korrigieren, Ihre Stildeklaration in den Kopf des Dokuments verschieben (obwohl Sie ihn in den meisten Browsern verwenden können), und entfernen Sie alle Informationen zum Hintergrundbild aus dem body-Tag.

Auch die URL, die Sie angeben, ist ein absoluter Pfad zu der Datei auf Ihrem Computer. Sie müssen wirklich relative Pfade verwenden und keine Pfade, die von der Dateistruktur Ihres Computers abhängen. Ich gehe davon aus, dass sich das HTML-Dokument im selben Ordner befindet Ordner als "Hintergrund copy.jpg". Daher sollte Ihr Code wie folgt lauten:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
    background: url('Background copy.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>

Zusätzlich zu den Aktualisierungen für Ihren Code würde ich den Namen aller Bilder ändern, die Sie verwenden, um alle Kleinbuchstaben zu verwenden und keine Leerzeichen in den Dateinamen zu enthalten. Dadurch sparen Sie sich eine Menge Kopfschmerzen.

Wenn Sie besser verstehen möchten, wie HTML/CSS funktioniert, und wie Sie sie richtig strukturieren, würde ich bei w3cschools nachlesen. Sie haben die Möglichkeit, es auf vielen Seiten selbst auszuprobieren, sodass Sie sehen können, wie der Code aussehen sollte strukturiert und testet verschiedene Dinge mit CSS & HTML.

w3schools css Tutorials - http://www.w3schools.com/css/default.asp

10
acSlater

Wahrscheinlich das:

html { 
  background: url(images/your_file.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Für IE - nur IE9 + sollten andere Browser - funktionieren.

Viel mehr Infos hier: http://css-tricks.com/perfect-full-page-background-image/

P.S. Sie könnten auch an Parallaxe interessiert sein.

3
mishik

Legen Sie einige Optionen für Ihr Hintergrundbild fest:

html,body{

    background-image: url('your/image/path');
    background-repeat: no-repeat;
    background-size: cover; // this fills up the complete page.
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Ich hoffe es hilft!

1
Kees Sonnema

https://css-tricks.com/perfect-full-page-background-image/

In der Version dieser Site funktioniert es perfekt. hier ist der code: 

html { 
background: url("image.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
0
xThereon