Hintergrundgrafik mit css ausrichten

Diskutiere Hintergrundgrafik mit css ausrichten im Web & Grafik Forum im Bereich Internet & Telekomunikation Forum; Guten Abend, ich hocke gerade an einem Backgroundgrafik-Problem. Ich habe eine Website, bei der der Inhaltsbereich von 960px zentral...
  • Hintergrundgrafik mit css ausrichten Beitrag #1
Bond246

Bond246

Bekanntes Mitglied
Dabei seit
03.06.2006
Beiträge
2.544
Reaktionspunkte
0
Ort
127.0.0.1
Guten Abend,

ich hocke gerade an einem Backgroundgrafik-Problem.
Ich habe eine Website, bei der der Inhaltsbereich von 960px zentral ausgerichtet ist. Da die Browserfenster logischerweise in aller Regel breiter sind, sieht man den Hintergrund rechts und links.
Bisher war dieser einfarbig, doch ich will da gerne das Profil von einer Person aus einem Foto haben.

Die Person würde links sein und nach rechts gucken. Es soll jedoch immer gewährleistet sein, dass nicht z.B. Nase und Augen hinter dem Inhaltsbereich verschwinden, wenn das Browserfenster unter einer bestimmten Größe ist.

Also war meine Idee, ich erstelle eine Bilddatei, die entsprechend breit ist und diese richte ich dann mittig aus. Den Bildinhalt, der theoretisch nicht durch Fotoinformationen abgedeckt ist, wollte ich mit der Hintergrundfarbe füllen. Doch jetzt fällt mir auf, dass die Hintergrundfarbe wiedergegeben durch CSS nicht mit der aus der jpg-datei identisch dargestellt wird. Nichtmal bei PNG klappt es.
Transparenz durch PNG kommt auch nicht in Frage, weil die Bilddatei damit horrend groß wird und gif ist ebenfalls keine Alternative, da kein Alphakanal vorhanden ist - es gibt nur transparent oder nicht, wenn dann brauche ich aber einen Farbverlauf.

Nun kann ich ja die Grafik durch CSS mit Längen- und Prozentangaben positionieren. Das funktioniert aber nur abhängig vom linken/oberen Rand. Bekomme ich CSS auch irgendwie dazu überredet, dass die Grafik anhand der Mitte ausgerichtet wird? Also z.B. 300px links von der Mitte des Browserfensters?
Das wäre optimal, weil ich dann die Grafik nicht elendig breit machen müsste und sogar png nutzen könnte. Die Datei wäre dann vlt. noch 200Kb groß, was noch in Ordnung ist...

Ich danke euch, für eure Vorschläge.
Gute Nacht
Bond
 
  • Hintergrundgrafik mit css ausrichten Beitrag #2
Bond246

Bond246

Bekanntes Mitglied
Dabei seit
03.06.2006
Beiträge
2.544
Reaktionspunkte
0
Ort
127.0.0.1
Ob das ganze mit CSS irgendwie machbar wäre, würde mich zwar trotzdem noch interessieren.
Aber fürs erste habe ich das ganze gelöst.
Der Farbunterschied beim JPG kam wahrscheinlich zustande, weil ich die Tonwertkorrektur versehentlich auf die komplette Datei mit Hintergrundfarbe angewendet habe und nicht nur auf das Foto.
 
  • Hintergrundgrafik mit css ausrichten Beitrag #3
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Mit CSS ist das machbar. Du legst die CSS-Eigenschaft "background-image" in den body-tag und positionierst das ganze mit background-position.
 
  • Hintergrundgrafik mit css ausrichten Beitrag #4
Bond246

Bond246

Bekanntes Mitglied
Dabei seit
03.06.2006
Beiträge
2.544
Reaktionspunkte
0
Ort
127.0.0.1
Mit CSS ist das machbar. Du legst die CSS-Eigenschaft "background-image" in den body-tag und positionierst das ganze mit background-position.

Aber dann kann ich doch nur definieren, ob ich vom oberen oder linken Rand ausgehend positionieren will.
Sowas wie
Code:
left: auto;
right: auto;

funktioniert nicht.
 
  • Hintergrundgrafik mit css ausrichten Beitrag #5
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Das ist richtig, aber dann definierst du eben eine DIV-Container positionierst diesen wie gewünscht und legst in diesen das Hintergrundbild.
 
Zuletzt bearbeitet:
Thema:

Hintergrundgrafik mit css ausrichten

ANGEBOTE & SPONSOREN

https://www.mofapower.de/

Statistik des Forums

Themen
213.179
Beiträge
1.579.172
Mitglieder
55.878
Neuestes Mitglied
Satan666
Oben