Hintergrundbild bei unterschielichen Auflösungen passt nicht

[priestkatten]

hallo zusammen,

hab da ein kleines Problem:
http://www.viribusunitis-blackhand.de/phpBB3/index.php

Habe für ein paar Freunde eine neue HP mit Forum gebastelt. Bei mir wird es auch korrekt angezeigt (1280*1024), nur kommt es bei einigen Nutzern zu verzerrungen.
im syleheet.css habe ich im body:

Code: Alles auswählen

background-color: #000;
	background-image: url(http://www.viribusunitis-blackhand.de/wp-content/themes/rockwell_v1.7.1/skins/black/gfx/stencils/clothing.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top-center;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: scroll;

eingefügt.

hatte gestern auch einiges ausprobiert via xampp, nur leider komme ich nicht auf die lösung alleine.
z.b.
http://www.ohne-css.gehts-gar.net/0055.php
http://css-tricks.com/how-to-resizeable ... und-image/ (3. versuch)

u.a. habe ich auch versucht einen <div-container> zu erstellen nur mit der hintergrunddatei, nur ka was die sauberste Lösung ist

mit der Bitte um rat

[HabNurNeFrage]

Hi,

ab iE9 und alle anderen neueren: background-size: cover;
Mit cover wird je nach Auflösung unten oder seitlich was abgeschnitten vom Bild.
Auch interessant der Wert contain und dann zentriert:

Code: Alles auswählen

background-image: url ('deine_bild_url') no-repeat center center; 
background-size: contain; 

Die Wirkungen von cover und contain kannst Du hier schön sehen.

Andere Methoden, die auch mit iE8 und noch älter funktionieren => hier.

Allerdings befürchte ich bei fast allen Methoden mit Prozent-Werten Probleme, weil der Forenhintergrund im Hintergrundbild integriert ist.
Da würde sich eine Trennung schon anbieten oder Festbreite in Pixel und dann komplett zentriert.
Dann hätten nur noch Leute mit Augenschwäche Probleme, die die Schriftgröße ändern

Hier mal zwei aktuelle Screenshots:
Shot 1 mit 1440x900: [ externes Bild ]
Shot 2 mit 1024x768: [ externes Bild ]

LG

[priestkatten]

Vielen Dank für deine Hilfe, das mit dem "cover" wusste ich noch gar nicht. Hab ich jetzt im css

Allerdings befürchte ich bei fast allen Methoden mit Prozent-Werten Probleme, weil der Forenhintergrund im Hintergrundbild integriert ist.
Da würde sich eine Trennung schon anbieten oder Festbreite in Pixel und dann komplett zentriert.
Dann hätten nur noch Leute mit Augenschwäche Probleme, die die Schriftgröße ändern

LG

problem ist ja das ich die Festenwerte nicht kenne

Code: Alles auswählen

min-width: 600px;
max-width: 1440px;
height: auto

sowas?
meine kenntnisse in css sind leider nicht enorm groß

[HabNurNeFrage]

Hi,

ist doch jetzt schon ganz prima die Anzeige.
Der Inhalt steht nur noch bei sehr kleinen Auflösungen (unter ca. 850 Pixel Bildschirmbreite) über.

IE 8 und älter interpretieren cover nicht und es sieht darin immer noch noch aus wie in Shot 1.
Für die XPler, die iE nutzen, kannst Du noch Folgendes hinzufügen, damit es wenigstens in iE8 auch so aussieht:

Code: Alles auswählen

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.viribusunitis-blackhand.de/wp-content/themes/rockwell_v1.7.1/skins/black/gfx/stencils/clothing.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.viribusunitis-blackhand.de/wp-content/themes/rockwell_v1.7.1/skins/black/gfx/stencils/clothing.png', sizingMethod='scale')"; 

Inwieweit das den Hintergrund ggf. vertikal staucht, weiß ich nicht... Einfach mal ausprobieren.
Andere Browser interpretieren das sowieso nicht.
Ich glaube auch nicht, dass irgendwelche WoW Freaks noch mit iE unter 8 unterwegs sind, wenn überhaupt mit iE...
Gibt ja schließlich auch (für XP) gute Browser

LG

[priestkatten]

Danke dir erneut und das will ich auch hoffen, einige nutzen aber einen MAC, andere spielen mit breitbild, deswegen ja die Probleme

der code kommt im overall header rein?

[HabNurNeFrage]

Hi,

nö, das kommt auch ins entsprechende CSS in den selben Selektor, vorzugsweise in neue Zeile nach background-size:cover;

Sind nur weitere Deklarationen...

LG

[priestkatten]

so einen hab ich noch nie gesehen, deswegen sry für die unwissenheit

hab ihn jetzt drin und hoffe es funktioniert jetzt.

Vielen vielen Dank für deine Hilfe