Seite 1 von 1

Hintergrundbild bei unterschielichen Auflösungen passt nicht

Verfasst: 14.05.2013 16:58
von 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

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 14.05.2013 17:55
von 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 :wink:

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

LG

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 14.05.2013 19:30
von priestkatten
Vielen Dank für deine Hilfe, das mit dem "cover" wusste ich noch gar nicht. Hab ich jetzt im css
HabNurNeFrage hat geschrieben: 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 :wink:

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ß :(

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 14.05.2013 20:06
von 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 :lol:

LG

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 15.05.2013 11:41
von 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?

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 15.05.2013 17:47
von 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

Re: Hintergrundbild bei unterschielichen Auflösungen passt n

Verfasst: 16.05.2013 15:25
von 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