CSS Hintergrundbild "richtig richtig" ausrichten

max_1234 · 27. März 2014

Bitte meine Frage "richtig" lesen, kann leicht falsch intepretiert werden

Ich bin leider kein CSS Geek ...

Also, Anforderungen:

Mein Hintergrundbild ist 1843*1300px groß.

Ich will folgendes ohne Javascript erreichen:
- Bild wird links oben ausgerichtet
- Die Bild-Länge soll der Auflösung des Desktops entsprechen, nicht der Browser-Fenstergröße
- Die Aspect Ratio soll immer gleich bleiben (kein einseitiges stretching)

Hab schon vieles versucht, leider klappte nichts.

Aktueller Code:

HTML

Code:

<body>
	<div id='bkgwrapper'> (...)
	</div>
(...)
</body>

CSS

Code:

#bkgwrapper
{ 
	/*width: 100%;*/
	min-width: 100%;
	height: 100%;
	background: url(../im/bkg.jpg) no-repeat;
}

Weder width noch min-width werden umgesetzt.
Wenn ich background-size: cover; oder background-size: 100% auto; verwende, dann passt sich der HG wieder der Fenstergröße an, was ich nicht will ...

Weiß jemand Rat ohne mit der Javascript Keule zu schwingen?

mfg,
Max

chriz-z · 27. März 2014

Hey!

Probiere mal im CSS vor dem "#bkgwrapper" noch eine Regel aufzustellen, die dem body eine Breite von 100% zuweist.
Bezüglich der Positionierung: background-position: left top; (oder top left - probieren oder Google bemühen)

Was spricht gegen Javascript?

blöderidiot · 27. März 2014

max_1234 schrieb:
Weiß jemand Rat ohne mit der Javascript Keule zu schwingen?

Geht nur mit Javascript.

max_1234 · 28. März 2014

blöderidiot schrieb:
Geht nur mit Javascript.

Hab ich mir fast schon gedacht .. schade eigentlich.
Man würde meinen dass man über CSS Zugriff auf die "maximale Fenstergröße" des Browsers hat, aber dem ist wohl nicht so.

Hab mir nun mit JS die Desktop-Auflösung ausgelesen und die entsprechenden CSS Felder (width, height, ~asp ratio) on-thy-fly daran angepasst.

Danke für die Antwort

mfg,
Max

DecentMan · 28. März 2014

Hallo,

gibt es bei CSS nicht das Viewport-Objekt dafür?
Damit kann man doch Größen definieren und auslesen.

Also wenn ich bei mir hier teste und als Breite 100vw und als Höhe 100vh verwende,
entspricht es genau der maximalen Größe...

Und in Kombination mit background-repeat, background-size und background-position sieht das
auch noch ganz brauchbar aus. Hatte selbst noch nie damit etwas zu tun gehabt, aber auf die Schnelle
mal getestet...

HTML:

<body style="margin:0; padding:0; width:100vw; height:100vh; background:black">
    <form id="form1" runat="server">
    <div style="width:100vw; height:100vh; background-image:url('Test.png'); background-repeat:no-repeat; background-size:cover; background-position:left, top">
    </div>
    </form>
</body>

Vielleicht kommst du mit diesem Beispiel ja irgendwie weiter?

max_1234 · 29. März 2014

Danke für die Antwort, aber so wird das Bild wieder mit der Größe des Browserfensters verschoben bzw. daran angepasst.

Ergänzung (29. März 2014)

Danke für die Antwort, aber so wird das Bild wieder mit der Größe des Browserfensters verschoben bzw. daran angepasst.

DecentMan · 29. März 2014

Ich glaube, dass ich dich leider nicht so ganz verstanden habe...

Wie groß ist deine Bildschirmauflösung? Du schreibst, dass das Bild 1843 x 1300 Pixel hat.
Damit ist aber nicht der Screen gemeint, sondern nur das Bild?

Wenn du ein Bild skalierst, dabei aber kein Stretching willst, muss ja gezwungenermaßen irgendwo ein Rand entstehen.
Also entweder rechts oder unten. Außer Bildresolution = Screenresolution...

Wie sieht es aus, wenn du einfach nur das background-size:cover entfernst?
Oder sitze ich gerade auf dem Schlauch...?!?

max_1234 · 30. März 2014

Allerdings

Das Bild soll sich zu keiner Zeit dem Browser-Fenster anpassen, sondern immer nur der Desktop-Auflösung.
Auch wenn das Browser-Fenster nicht maximiert ist, so soll sich der Hintergrund mit 100% immer noch an der Desktop-Auflösung orientieren.

Ich versuche das Ganze gerade mit JS, aber ohne einen div wrapper umzusetzen.. huihui

Suche

CSS Hintergrundbild "richtig richtig" ausrichten

max_1234

Captain

chriz-z

Ensign

blöderidiot

Captain

max_1234

Captain

DecentMan

Gast

max_1234

Captain

DecentMan

Gast

max_1234

Captain

Ähnliche Themen