• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FULLSCREEN Background Image wird nicht ganz angezeigt.

R

Roof3

Neues Mitglied
Servus Jungs und Mädels,

ich bin neu im HMTL und CSS Universum und hätte eine Anfänger Frage.

Ich hab mir schon ein paar Videos auf Youtube angesehen, aber bei keinem hat es funktioniert wie es sollte.

Ich möchte ein FULLSCREEN Hintergrundbild haben. Allerdings wird von oben und unten einfach was vom Bild "weggeschnitten". In der Breite scheint alles zu passen.

Hier mal der Code den ich von den Videos übernommen habe.

HTML: 
<style type="text/css">

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

</style>

Das Hintergrundbild hat eine Größe von 1800x1500 Pixel. Ich habe es auch schon verkleinert, aber es wurde trotzdem wieder von oben und unten genauso viel "abgeschnitten".


Ich hoffe mir kann jemand helfen.


-
RoOF
 
Dein CSS-Code ist nun fehlerhaft. Ich frage mich immer, ob hier die Leute wohl richtig lesen... Fixxed schreibt man nur mit einem "x".

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

Natürlich fehlt hier noch margin und padding 0.
 
nookie schrieb:
Code: 
html {
  background: url(WALLPAPER.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Natürlich fehlt hier noch margin und padding 0.
Zum Vergrößern anklicken....

Des hab ich ja au probiert. Des hat genau den gleichen Effekt wie beim starten des Themas hier. Das Bild wird oben und unten abgeschnitten. Veränder ich die Fenstergröße meines Browsers werden die oberen und unteren Teile des Hintergrundes sichtbar.
 
Hallo,

eventuell liegt hier ein Verständnisproblem vor.

Code: 
background-size: cover;

sorgt dafür, das das Hintergrundbild nicht verzerrt wird und trotzdem das gesamte Fenster ausfüllt. Wenn das Breiten-/Höhenverhältnis von Bild und Fenster unterschiedlich sind wird das Hintergrundbild entweder in der Höhe oder der Breite beschnitten. Das dürfte die Regel sein.

Wenn das Hintergrundbild vollständig sichtbar sein soll muss es in der Regel verzerrt werden. Das wird mit der Angabe

Code: 
background-size: 100% 100%;

erreicht.

Code: 
background-size: contain;

passt das Bild so in das Fenster ein, das es vollständig sichtbar ist, wobei in der Regel Freiflächen entstehen. Bei unterschiedlichem Breiten-/Höhenverhältnis hängt die Nutzung der freien Fläche von der Einstellung

Code: 
background-repeat:

ab.

Am besten fügst du zum Testen in die CSS-Datei mal folgendes ein:
Code: 
background-color: red;
background-image: url(WALLPAPER.jpg);
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
background-size: cover;

Die unterste background-size-Angabe ist dann die aktive. So kannst du alle Einstellungen problemlos durchprobieren, indem du die drei Angaben umsortierst.

Andere Angaben wie "background-position" sollten erst später hinzugefügt werden, wenn die Enscheidung für eine background-size-Angabe getroffen ist.

Nebenbei: Es hat sich bewährt in HTML/CSS Dateinamen grundsätzlich in Kleinbuchstaben zu verwenden.

Außerdem solltest du testen was passiert, wenn die Datei viel Text enthält, der über die aktuelle Fensterhöhe hinausgeht. Das führt immer wieder zu Überraschungen, wenn das Hintergrundbild zunächst ohne Inhalt eingefügt wird.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dem HTML und Body eine Mindesthöhe von 100% und für ältere Browser eine normale Höhe von 100% geben. Das Dein Bild angeschnitten wird, liegt wie schon an anderer Stelle gesagt an dem Seitenverhältnis deines Bildes und des entsprechenden Viewports (1800x1500 ist nicht wirklich ein sinnvolles Verhältnis).
Für weitere Hilfe ist folgendes Tutorial empfehlenswert:
https://css-tricks.com/perfect-full-page-background-image/
Es wäre auch hilfreich den kompletten Code deiner Seite zu sehen, lade ihn doch mal auf codepen o.Ä hoch.
LG
 
ypreiss schrieb:
Du musst dem HTML und Body eine Mindesthöhe von 100% und für ältere Browser eine normale Höhe von 100% geben. Das Dein Bild angeschnitten wird, liegt wie schon an anderer Stelle gesagt an dem Seitenverhältnis deines Bildes und des entsprechenden Viewports (1800x1500 ist nicht wirklich ein sinnvolles Verhältnis).
Für weitere Hilfe ist folgendes Tutorial empfehlenswert:
https://css-tricks.com/perfect-full-page-background-image/
Es wäre auch hilfreich den kompletten Code deiner Seite zu sehen, lade ihn doch mal auf codepen o.Ä hoch.
LG
Zum Vergrößern anklicken....

Servus,

Danke für eure Antworten. Ich hab jetzt mal auf der Seite "CSS Tricks" zahlreiche Methoden ausprobiert, ich kam aber immer zu dem selben Ergebnis.. Vielleicht liegt es doch an dem Bild. Aber ich hab doch auch schon das Bild verkleintert und des hatte den selben effekt nur das das Bild dann unscharf war.

Welches Format ( Pixel x Pixel) ist den perfekt für den Fullscreen Background geeignet. ?


Zum Thema Kompletten Code.. Da gibts nicht Viel .. Weil ich schon am Background scheitere :/ :(


HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Seite</title>
</head>
<style type="text/css">


body
{
margin:0;
padding:0;
}

html
{


background: url(WALLPAPER.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


min-width:100%;
min-height:100%;

}


</style>

<body>

</body>

</html>


-

RoOF
 
Roof3 schrieb:
Servus,

Danke für eure Antworten. Ich hab jetzt mal auf der Seite "CSS Tricks" zahlreiche Methoden ausprobiert, ich kam aber immer zu dem selben Ergebnis.. Vielleicht liegt es doch an dem Bild. Aber ich hab doch auch schon das Bild verkleintert und des hatte den selben effekt nur das das Bild dann unscharf war.

Welches Format ( Pixel x Pixel) ist den perfekt für den Fullscreen Background geeignet. ?


Zum Thema Kompletten Code.. Da gibts nicht Viel .. Weil ich schon am Background scheitere :/ :(


HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Seite</title>
</head>
<style type="text/css">


body
{
margin:0;
padding:0;
}

html
{


background: url(WALLPAPER.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


min-width:100%;
min-height:100%;

}


</style>

<body>

</body>

</html>


-

RoOF
Zum Vergrößern anklicken....
Du musst dem HTML und Body eine Mindesthöhe von 100% und für ältere Browser eine normale Höhe von 100% geben.
Zum Vergrößern anklicken....
 
Roof3 schrieb:
Welches Format ( Pixel x Pixel) ist den perfekt für den Fullscreen Background geeignet. ?
Zum Vergrößern anklicken....

Woher willst du wissen, wie groß der User sein Browser-Window aufgezogen hat?

Du könntest die Ränder des Bildes per Photoshop in eine Farbe überblenden und diese zusätzlich auf den Body legen. Das vermittelt die Illusion eines Fullsize-Backgrounds, unabhängig von Auflösung und Seitenverhältnis.

backgroundsize: contain brauchst du allerdings trotzdem.
 
Hallo.

Sinnvoll wäre es auch die CSS Styles in den head zu schreiben und das Hintergrundbild body zu geben und nicht html.

Gruss
Elroy
 
Vielleicht hilft ja das Seitenverhältnis 16:9 (1800px x 1012px) oder (2667px x 1500px). Weil 4:3 hat wohl keiner mehr.
Versuch mal ob es so geht. Wenn es nicht funktioniert, dann lass es mit so'n großes BG
 
Zuletzt bearbeitet:
Tronjer schrieb:
16:10 ist aber auch weit verbreitet. Außerdem muss der Viewport ja nicht full-screen sein.
Zum Vergrößern anklicken....

Jep, habe auf Mac OSX immer das Fenster im 4:3 Format offen.
Leider verstehen manche Leute nicht, warum eine rechteckige Form nicht in eine quadratische Form passt, keine Ahnung warum… Wenn weder cover noch contain zum gewünschten Ergebnis führen, kann man eigentlich nur noch den Kopf schütteln.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben