Hintergrundbild skalieren, Hintergrundbild skalieren Einstellungen

[Markus]

hallo,
ich habe mal wieder ein kleines Problem...

die Seite wird mit css gestaltet (der Tipp war anfangs etwas mühsam aber schon hilfreich was die Änderungen angeht)

oben befindet ein Container mit einer Hintergrundgrafik (ein JPG mit 8x8 Pixel) die in beide Richtungen wiederholt wird und mittig ein logo platziert wird.

links befindet sich ein Menü und rechts davon der Anzeigebereich der Seite und unten eine Fußzeile.

Die ganze Seite ist so angelegt, das ich nur Höhenangaben und Ränder gesetzt habe und den Rest eigentlich über Prozentangaben gelöst habe – der Hintergrund dieser Aktion ist das sich die Seite den verschiedenen Browsereinstellungen anpasst. Bis hierher klappt eigentlich alles (außer das sich Mozilla weigert einen Hintergrund anzuzeigen (egal ob Farbe oder Bild *grübel*)).

Jetzt wollte ich ein Hintergrundbild habe – etwas Schlichtes. Dabei handelt es sich um ein JPG das von links oben nach rechts unten von blau nach weiß verläuft.

Dieses Bild soll mit „Fixed“ und „no-repeat“ als Hintergrundbild verankert werden.

Das Problem das ich habe ist, dass das Bild nicht mit wachst bzw schrumpft wenn sich die Browsereinstellungen verändern. wenn man das Browserfenster verkleinert hat man irgendwann nur noch Blauverläufe und wenn man es stark vergrößert nur noch ein bild das halt im Hintergrund liegt *sieht aber nicht schön aus*

gibt es eine Möglichkeit dass das Hintergrundbild automatisch mit skaliert wird wie ich es auch bei den Containern machen kann, oder einen befehl für Farbverläufe?


Auszug der CSS datei:

QUELLTEXT

<style type="text/css">
<!--
body{
 background-color: #4F9EC9;
 background-image:url(../grafiken/bg-04.jpg);
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position : center;
 margin:0.5%;
 padding:0%;
 color: #4F9EC9;
 font-family: Arial, Verdana, Helvetica;
 }

 html{
 height:150%;
 margin:0.1%;
 padding:0.1%;
 color: #00007F
 }

.box1{
 min-height:100pt;
 background:#4F9EC9;
 background-image:url(../grafiken/bg_kopf4.jpg);
 background-repeat:repeat;
 margin:auto;
 padding:5pt;
 color: #00007F;
 }

.box2{
 background-image:url(../grafiken/bg_div.jpg);
 background-repeat:repeat;
 float:left;
 margin-top:1%;
 width:20%;
 min-height:100pt;
 padding:0.5%;
 }

.box3{
 background:transparent;
 float:right;
 width:75%;
 padding:5px;
 padding-left:5px;
 margin-top:1%;
 border:1px solid #0000DF;
 color: #00007F;
 font-family: Arial, Verdana, Helvetica;
 font-size: 100%;
 font-variant: normal;
 font-weight: 500;
 font-style: normal;
 line-height: normal;
 text-align: left;
 text-decoration: none;
 letter-spacing: normal;
 word-spacing: normal;
 }

.box4{
 clear:both;
 background:#4F9EC9;
 background-image:url(../grafiken/bg_div.jpg);
 background-repeat:repeat;
 color: #00007F;
 height:auto;
 margin:2%;
 padding:7pt;
 }
.
.
.

den Parameter "background-color:" habe ich nur angegeben, falls das Bild mal nicht geladen werden kann oder von Browser nicht angezeigt werden soll damit sich das gesamt Bild der Seite nicht zusehr verändert.


Markus

[i.b.g]

Hallo,

1. Dass Mozilla ein Hintergrundbild nicht anzeigt, ist nicht unbedingt Mozillas Problem. Es wird an der Pfadangabe zum Bild liegen. Ich würde mal versuchen, eine absolute Pfadangabe zu verwenden - entweder zum gesamten Dateibaum oder mindestens zur Web-Root, wenn denn ein Webserver benutzt wird. Zur Hintergrundfarbe kann ich jetzt nichts sagen. Du hast aber z.B. im body Hintergrundfarbe und Schriftfarbe auf den gleichen Wert gesetzt, was ungewöhnlich ist.

2. Das automatische Skalieren von Bildern ist nach meiner Kenntnis generell nicht möglich und nicht nur nicht für den Hintergrund. Wenn das ginge, dann würde das sicher Manchem das Webdesign erleichtern. Man kann zwar über width und height Bilder statisch vergrößern oder verkleinern - mit einem Script gegebenfalls sogar dynamisch; für den Hintergrund ist mir nichts bekannt.

Ich erhebe keinen Anspruch auf Vollständigkeit!

Kann man das ganze irgendwo im Internet ansehen? Dann wäre eine Fehelrsuche eventuell einfacher für uns im Forum.

[Markus]

Hallo,

1. Dass Mozilla ein Hintergrundbild nicht anzeigt, ist nicht unbedingt Mozillas Problem. Es wird an der Pfadangabe zum Bild liegen. Ich würde mal versuchen, eine absolute Pfadangabe zu verwenden  - entweder zum gesamten Dateibaum oder mindestens zur Web-Root, wenn denn ein Webserver benutzt wird.

das werde ich mal versuchen...

Zur Hintergrundfarbe kann ich jetzt nichts sagen. Du hast aber z.B. im body Hintergrundfarbe und Schriftfarbe auf den gleichen Wert gesetzt, was ungewöhnlich ist.

da ich die textausgaben über css formatiere habe ich den body mit der gleichen farbe formatiert damit evtl. "unsinnige" zeichen nicht optisch dargestellt werden. (falls sich ein browser an irgendetwas auskotzt...)

2. Das automatische Skalieren von Bildern ist nach meiner Kenntnis generell nicht möglich und nicht nur nicht für den Hintergrund. Wenn das ginge, dann würde das sicher Manchem das Webdesign erleichtern. Man kann zwar über width und height Bilder statisch vergrößern oder verkleinern - mit einem Script gegebenfalls sogar dynamisch; für den Hintergrund ist mir nichts bekannt.

Ich erhebe keinen Anspruch auf Vollständigkeit!

das ist ja blöd - ich dachte ich finde das nur nicht ...

Kann man das ganze irgendwo im Internet ansehen? Dann wäre eine Fehelrsuche eventuell einfacher für uns im Forum.

nein... das ist bei mir lokal... sonst hätte ich einen link gepostet

[sgt]

Hallo Markus,

wenn ich Dich richtig verstanden habe, dann habe ich hier einen Link zu einem Beispiel auf meiner Internetseite für Dich:

http://www.stegasoft.de/web_tutorials/bg_a...g_auto_zoom.htm

Diese Funktion wurde ausschließlich mit CSS realisiert, d.h. Du brauchst kein JavaScript dafür.
Getestet habe ich die Seite mit IE6, FiFo, NS7 und Opera 7. Bei letzterem funktioniert es leider nicht richtig.

Vielleicht hilft es Dir ja weiter.

Gruß
Stephan

[i.b.g]

Hallo,

Dein Vorschlag hat die altbekannten Mängel. Geht die Größe des Textes über den Bildschirmrand hinaus, gibt es sofort Darstellungsprobleme, was am Ende nicht wirklich schön ist, weil das img eben nicht über die Fenstergröße hinaus ausgedehnt wird. Für den Einzelfall mag es gut gehen, aber für den allgemeinen Fall, und das Internet und seine Nutzer sind wegen der großen Summe der Einzelfälle der allgemeine Fall, ist es - so meine ich - keine Lösung.

[Auge]

Hallo

CSS-Hintergrundbilder kannst du nicht skalieren. Bei Bildern, die über <img> eingefügt werden, ist dies partiell möglich. Wenn du z.B. Schriftgrößen, Breiten oder Höhen per em angibst, richten sich diese Maße an der Breite des Buchstaben m. Diese Angabe kannst du per CSS auch dem Bild zuweisen.

Es wächst also bei Veränderung der Schriftgröße im Browser mit. Ob dies allerdings immer schön aussieht, ist eine andere Frage (aufpixeln).

Tschö, Auge

[sgt]

Klar, dass die Grafik beim Vergrößern pixelig wird.
Ob und in wie weit so ein Design sinnvoll ist, mag jeder selbst entscheiden.
Ich wollte halt nur eine Möglichkeit aufzeigen, die ohne JavaScript auskommt.
Es ist ja auch kein wirkliches Hintergrundbild. Der "Trick" an der Sache ist, dass mit zwei DIV-Containern gearbeitet wird, die auf zwei Ebenen liegen (Hintergrund und Seiteninfo). Wie Auge schon richtig sagte, wird die Höhe und Breite des Images an den Anzeigebereich angepasst.

Gruß
Stephan

[Markus]

Hallo,

erst einmal vielen Dank an alle die helfen wollten.

@sqt
ja, so hatte ich mir das in etwa gedacht...
leider habe ich ich es nicht hin bekommen dies in die css datei einzubinden ;-(


das grösste Problem ist aber, dass mir die Grafik teilweise mit einem weißen Rand (nicht Rahmen) angezeigt wird (beim IE) und mit Opera normal... Mozilla zeigt eine wiesse seite an (ich hasse Mozilla - macht mir irgendwie immer ärger)

Abgesehen davon das der Rest der Seite unter dem geplantem BG angezeigt wird.

irgendwie muss ich mit das mit dem Z-index nochmal durchlesen...



Markus

uups... irgendwie hatte hier etwas nicht so geklappt wie geplant...

könnte bitte ein admin dieses post nach "HTML-Editor Phase5 Support > Sonstiges > HTML > Hintergrundbild skalieren" verschieben... danke

Der Beitrag wurde von Markus bearbeitet: 24.04.2005 - 16:52

[i.b.g]

Hallo,

... (ich hasse Mozilla - macht mir irgendwie immer ärger)  ....

Dann machst Du etwas falsch. Nur weil andere Browser eine höhere Fehlertoleranz haben, sind sie keinesfalls besser. Manchmal liegt es einfach an so lapidaren Dingen wie GROß/klein-Schreibung oder der richtigen Pfadbezeichnung.

.... uups... irgendwie hatte hier etwas nicht so geklappt wie geplant...

Das scheint Dich ein weing zu verfolgen .

[urvater]

was willst du mit deinem

"@sqt" eigentlich erreichen?

leider habe ich ich es nicht hin bekommen dies in die css datei einzubinden ;-(

in CSS gibt es nur @font-face; @import;@page und @media
sqt selbst ist keine mit bekannte CSS Syntax selbst

das grösste Problem ist aber, dass mir die Grafik teilweise mit einem weißen Rand (nicht Rahmen) angezeigt wird (beim IE) und mit Opera normal... Mozilla zeigt eine weisseite an

Wo soll die Grafic eingebunden werden?

(ich hasse Mozilla - macht mir irgendwie immer ärger)

vielleicht machst du dem Mouilla auch nur Ärger?

Abgesehen davon das der Rest der Seite unter dem geplantem BG angezeigt wird.

Was ist ein BG? oder sollte es GB heissen. Dies würde darauf hinweisen, dass du etwas nicht korrekt im Quellcode erfasst hast.

Z-index ... legt fest welche Schicht von welcher überlagert wird. Kann hierdran nicht liegen


[edit]Andreas: ich habe mal die Quotes als "quotes" eingefügt, damit man den Sinn des Postings besser erkennen kann.[/edit]

Der Beitrag wurde von Andreas bearbeitet: 25.04.2005 - 8:49

[Google Bot]