2 farbiger balken als hintergrund

[murdock77]

Hallo,

noch ist das Problem theoretisch und wüßte mal gerne wie ihr da vorgehen würdet:

Ich möchte einen Balken im Hintergrund von links nach rechts über das gesamte Browserfenster. Das allein ist ja noch kein Problem mit dem background: url(...) repeat-x;
In der Mitte zentriert dann ein Container mit dem Inhalt der einen Teil überlagert. Auch kein Problem.

Jetzt mein Problem: Der Balken soll nach links eine andere Farbe haben als nach rechts. Keine Übergänge oder sowas, sondern nur in der Mitte des Browserfensters die Farbe von rot nach blau wechseln. Unabhängig von der Browsergröße sollen die Farben rechts und links ins unendliche laufen.

Soll ich dann den Background stretchen ?

Vielleicht hat ja jemand ne Idee. Vielen Dank dafür

[murdock77]

Jetzt habe ich schon eine halbwegs Lösung, die ich mal hier poste, falls jemand anders auch dieses Problem hat:

Also ich könnte ein gif mit ca 5000px (ich hoffe niemand hat solche monitorbreiten) breite x 200 px höhe machen, wo genau in der Mitte der Farbwechsel ist und das dann über

background-position: center 100px; /* also horizontal zentriert und von oben 100 px verschoben */
background-repeat: no-repeat;

einbinden. Das müsste gehen. Bildgröße ist dann ca 4-5 kb, auch noch tragbar.
Damit bleibt der Farbwechsel immer in der Mitte und wird dort ja durch den zentrierten Container immer überdeckt.

Hat noch jemand ne andere Idee? Aber ich glaube die ist ganz gut

[sejuma]

Das ist sicherlich eine einfache und recht praktikable Lösung, die ich ebenso bevorzugen würde.

Etwas umständlicher:
Möglich wäre noch, mit zwei Kachelgrafiken zu arbeiten, die von der Mitte ausgehen, zumindest optisch.

Sieh dir dazu mal diese Anleitung an: http://www.ohne-css.gehts-gar.net/0049.php

Habe sie mal umgebastelt:
Statt html und body nimm zwei Divs:

Code: Alles auswählen

#div1 {
background: #fff url(http://www.ohne-css.gehts-gar.net/img/0049/farbverlauf_schwarz_weiss.gif) repeat-x top left;
position: relative;
z-index: 2;
width: 100%;
height: 250px;
}

#div2 {
margin: 0;
background: url(http://www.ohne-css.gehts-gar.net/img/0049/watzmann.jpg) repeat-x top center;
position: absolute; left: 50%;
z-index: 3;
width: 50%;
height: 250px;
}

Code: Alles auswählen

<div id="div1">
<div id="div2">
</div>
</div>

[ThomaZ]

Mein Vorschlag zu dem Thema, einen <img>-Hintergrund.

Code: Alles auswählen

<div id="hintergrund">
     <img src="blabla.jpg" />
</div>


den kann man dann sogar der Barrierefreihet wegen ganz am Ende des Bodys lagern.
Formatiert wird der dann so:

Code: Alles auswählen

div[id="hintergrund"] {
     position: absolute;
     top: 100px;
     left: 0;
     right: 0;
     height: 100px;
     z-index: 1;
}
div[id="hintergrund"] > img {
     width: 100%;
     height: 100%;
}


dafür reicht theoretisch auch ein Bild mit wenigen Pixeln breite, da das Bild automatisch gestreckt wird. Musst du mal ausprobieren wie klein du es machen kannst. Und bevor die Frage kommt; Nein man kann im background keine Bilder strecken.


MfG

Thomas

[klaus-weber1973]

hallo ich würde gerne paar programme kennen lernen mit denen ich am desktop 1. in guter qualität videos aufnehmen könnte und sie dann als avi speichern 2. ein programm mit dem man die videoübergänge cool darstellen kann