Zentrieren eines Hintergrundbilds mithilfe von CSS

148

Ich möchte ein Hintergrundbild zentrieren. Es wird kein div verwendet, dies ist das CSS Stil:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Die obigen CSS-Kacheln sind überall und zentrieren sie, aber das halbe Bild wird nicht gesehen, es bewegt sich nur irgendwie nach oben. Ich möchte das Bild zentrieren. Könnte ich das Bild übernehmen, um es auch auf einem 21-Zoll-Bildschirm anzuzeigen?

css

— X10nD
quelle

1

Das würde nun von der Größe des Bildes und der Größe des Browsers abhängen, nicht wahr?

— Nikc.org

@ Nikc +1, ich bin mir bewusst, muss aber wissen, ob es eine Arbeit gab

— X10nD

304

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Das sollte funktionieren.

Wenn nicht, warum nicht ein divBild mit dem Bild erstellen und z-indexes als Hintergrund verwenden? Dies wäre viel einfacher zu zentrieren als ein Hintergrundbild auf dem Körper.

Anders als dieser Versuch:

background-position: 0 100px;/*use a pixel value that will center it*/Oder ich denke, Sie können 50% verwenden, wenn Sie Ihren Körper min-heightauf 100% eingestellt haben.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

— Kyle
quelle

Es wird zwar zentralisiert, zeigt aber nur die Hälfte des Bildschirms an. Ich wünschte, Stackoverflow hätte die Option, Screenshots anzuhängen

— X10nD

Sie können einen Screenshot erstellen und auf Ihren Server oder eine kostenlose Bild-Hosting-Site wie photobucket.com hochladen oder ein temporäres Beispiel unter www.jsfiddle.net erstellen und einen Link für uns veröffentlichen. Nach Ihren Angaben ist das Bild 1600 x 1200 und die meisten Bildschirmauflösungen sind nicht so hoch. Versuchen Sie, die Größe Ihres Bildes so anzupassen, dass es passt. Ich benutze zum Beispiel einen Breitbildmonitor mit einer Größe von 1440 x 900.

— Kyle

Screenshot - imagevat.com/picview.php?ig=6179 Ich bin nicht sicher, wie ich Bilder auf jsfiddle hochladen soll, wenn Sie mir da draußen

— X10nD

Um jsfiddle ein Bild hinzuzufügen, verwenden Sie einfach den vollständigen http-Pfad EX: Fügen Sie background-image:url(http://www.myurl.com/images/image.jpg);diesen in das CSS ein.

— Kyle

Ich habe nicht den Server, um es zu tun, aber ich habe eine Imagehosting-Site verwendet, aber ich überprüfe es jetzt noch

— X10nD

20

Ich benutze diesen Code, es funktioniert gut

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

— Sieger Martinez
quelle

Vielen Dank! Ich wusste nicht einmal, dass es verschiedene Erklärungen für Webkit usw. gab

— Mike Rapadas

Hey Victor, ich habe deinen Code oft benutzt, aber es sieht so aus, als würde er jetzt nicht funktionieren. Ich habe Hintergrund-Anhang hinzugefügt: behoben; aber es funktioniert nicht auf meinem iPad-Browser ...

— Vadim

Nur -webkit-background-sizebesteht aus den speziellen Erklärungen though.

— BigBang1112

16

Ich denke, das ist, was gewünscht wird:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

— Krabbe
quelle

6

Hintergrund-Anhang hat das Problem für mich behoben;)

— kdoteu

7

Versuchen

background-position: center center;

— Pekka
quelle

Wie kommt es, dass das Double Center Center funktioniert? Wie auch immer, es löst das Problem nicht, immer noch das gleiche

— X10nD

1

@ Jean: Schauen Sie sich die Spezifikationen an, die Hintergrundposition kann tatsächlich 2 Werte annehmen (horizontal und vertikal). w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@rob es funktioniert nicht, das Bild wird gekachelt. Das Bild ist 1600x1200 und meine Bildschirmgröße ist

— 1280x800

2

@ Jean Sie können die Größe eines Hintergrundbildes (noch) nicht ändern. Es ist in CSS 3 möglich, aber das wird noch nicht weit genug unterstützt. center centerin Verbindung mit background-repeat: no-repeatsollte tun, was Sie verlangen - zentrieren Sie das Bild.

— Pekka

2

@ Jean ahh, ich sehe jetzt aus deinem Screenshot. Sie müssen das bodya min-heightvon 100%angeben, damit es sich über den gesamten Bildschirm erstreckt. Das kann es sortieren.

— Pekka

5

So was:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Erweitern Sie das Snippet

— Ronnie Royston
quelle

3

Ihr Code enthält einen Fehler. Sie verwenden eine Mischung aus vollständiger Syntax und Kurzschreibweise für die Eigenschaft "Hintergrundbild". Dadurch wird die Nichtwiederholung ignoriert, da dies kein gültiger Wert für die Eigenschaft "Hintergrundbild" ist.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Sollte eine der folgenden werden:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

oder

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

BEARBEITEN: Bei Ihrem Problem mit der Bildskalierung sollten Sie sich die Antwort dieser Frage ansehen .

— Rob van Groenewoud
quelle

'Hintergrund: URL (../ images / images2.jpg) center center no-repeat;' funktioniert nicht, da die Syntax falsch ist Und die anderen funktionieren auch nicht

— X10nD

2

Versuche dies background-position: center top;

Dies wird den Trick für Sie tun.

— Magnus
quelle

2

background-repeat:no-repeat;
background-position:center center;

Zentriert das Hintergrundbild nicht vertikal, wenn ein HTML 4.01-Doctype 'STRICT' verwendet wird.

Hinzufügen:

background-attachment: fixed;

Sollte das Problem beheben

(Also hat Alexander recht)

— Stephan
quelle

1

einfach ersetzen

background-image:url(../images/images2.jpg) no-repeat;

mit

background:url(../images/images2.jpg)  center;

— Praveen
quelle

0

Wenn Sie mit den obigen Antworten nicht zufrieden sind, verwenden Sie diese

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

— Toye_Brainz
quelle

0

Hatte das gleiche Problem. Verwendete Anzeige- und Randeigenschaften und es hat funktioniert.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

— Robert Paul
quelle

0

background-position: center center;

funktioniert bei mir nicht ohne ...

background-attachment: fixed;

mit beiden zentrierte mein Bild auf der x- und y-Achse

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

— Greenbeen
quelle

-2

Das einzige, was für mich funktioniert hat, ist ..

margin: 0 auto

— plumpsen
quelle