Weiteres Bild im Hintergrund positionieren ?

sergej59 · 11 Mai 2009

Hallo,
gibt es eine Möglichkeit neben dem standart Hintergrund für <body>, ein weiteres Hintergrundbild im Hintergrund zu positionieren, also ich möchte oben in der linken Ecke neben meinen Hintergrund, der bleiben soll , ein Weiteres Bild einfügen.

dasch · 11 Mai 2009

nimmst du halt einfach eine div (<div>) und verpasst ihr z-index = 1 und position absolut sowie die left und top werte zur ausrichtung der box das gleiche machst du auch mit einer 2ten div nur das dort der z-index 2 betragen muss

prm · 12 Mai 2009

... oder dem bereits ohnehin vorhandenen Element "html", siehe Zwei Hintergrundgrafiken zuweisen

sergej59 · 12 Mai 2009

prm schrieb:
... oder dem bereits ohnehin vorhandenen Element "html", siehe Zwei Hintergrundgrafiken zuweisen

Habe ich auch schon dran gedacht, jedoch verwende ich Frames, diese jedoch sollen den 2ten Hintergrund nicht haben.

dasch schrieb:
nimmst du halt einfach eine div (<div>) und verpasst ihr z-index = 1 und position absolut sowie die left und top werte zur ausrichtung der box das gleiche machst du auch mit einer 2ten div nur das dort der z-index 2 betragen muss

Habe es eben versucht, doch irgend was mache ich falsch.

style.css

Code:

.bg2 {
background-image: url(design/test.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
z-index:1;}

Html

Code:

<div class="bg2"></div>

Efchen · 13 Mai 2009

sergej59 schrieb:
jedoch verwende ich Frames

Freiwillig? Oder hat Dich jemand dazu gezwungen? Wie übel ist es?
Du solltest denjenigen anzeigen! ;-)

sergej59 · 13 Mai 2009

Efchen schrieb:
Freiwillig? Oder hat Dich jemand dazu gezwungen? Wie übel ist es?
Du solltest denjenigen anzeigen! ;-)

Weißt du was

,
ich mache es freiwillig mit Frames, obwohl ich über die
ganzen Nachteile bescheid weiß.
Ich bin noch Anfänger und will selber meine Erfahrungen mit den Dingern
sammeln, werde dann wahrscheinlich auch auf CSS umsteigen.

Was habe ich jetzt falsch gemacht, dass meine 2ter hintergrund nicht angezeigt wird ?

EDIT:
Habe es jetzt einigermaßen hinbekommen, jedoch
ist das bild immer noch im Fordergrund also überdeckt alles,
wie bekomme ich es in den Hintergrund ?

Und das Bild ist immer noch nicht links oben, da ist immer noch genügend Abstand,
den ich wegbekommen will.

Code:

  <style type="text/css">
  <!--
#bg2{
   float: left;
   width: 160px;
   height: 160px;
   min-height: 100%;
   margin-bottom: auto;
   background:url(design/test.png)
   no-repeat top left ;
   position: absolute;

  }
    -->
  </style>
  <div id="bg2">
    
</div>

Efchen · 14 Mai 2009

sergej59 schrieb:
ich mache es freiwillig mit Frames,
Ich bin noch Anfänger und will selber meine Erfahrungen mit den Dingern
sammeln

Das ist eine gute, akzeptable Begründung.

werde dann wahrscheinlich auch auf CSS umsteigen.

Wenn ich eine Frames-Seite machen müsste, würde ich trotzdem CSS verweden, weil CSS ja für das Aussehen zuständig ist. Frames kann man mit nichts vergleichen, nicht mit HTML, include, CSS oder sonstwas, weil sie ein Sammelsurium aus verschiedenen Features sind, die man alle mit anderen und vor allem verschiedenen Mitteln nachbilden kann.

Was habe ich jetzt falsch gemacht, dass meine 2ter hintergrund nicht angezeigt wird ?

Gibts mal nen Link zur Seite? Das würd einiges einfacher machen.

jedoch
ist das bild immer noch im Fordergrund also überdeckt alles,
wie bekomme ich es in den Hintergrund ?

Ich kann mir nicht vorstellen, wie ein Hintergrundbild im Vordergrund stehen soll, es sei denn, Du hast mehrere Elemente per absoluter Psitionierung und mit z-index übereinander gelegt. Dann musst Du nur den z-index entsprechend anpassen.

Und das Bild ist immer noch nicht links oben, da ist immer noch genügend Abstand,
den ich wegbekommen will.

Laut dem Code ist es das. Ich vermute eher, dass das Element, dem Du das Hintergrundbild zugewiesen hast, nicht da ist, wo Du es haben möchtest. Immerhin verwendest Du absolute Positionierung, sagst aber nicht, wo es positioniert werden soll. Da haben IIRC einige Browser mit Probleme.

sergej59 · 14 Mai 2009

Ok, habe jetzt was hochgeladen,
so der Einschuß sollte ganz oben links in der Ecke sein und hinter der Tabelle liegen.

http://sergej59.se.funpic.de/test/main.html

Bernhard · 14 Mai 2009

sergej59 schrieb:
Ok, habe jetzt was hochgeladen,
so der Einschuß sollte ganz oben links in der Ecke sein und hinter der Tabelle liegen.

http://sergej59.se.funpic.de/test/main.html

Hallo Sergej,

hmmm - Frames seh ich da keine.

Änder mal:

Code:

htmltest {
margin: 0;
background: url(design/test.png) no-repeat top left;
}

neu:

Code:

html {
background: url(design/test.png) no-repeat top left;
}
body {
background-color:#848484;
margin: 0;
padding: 0;
...
}

Grüße
Bernhard

sergej59 · 14 Mai 2009

Bernhard schrieb:
Hallo Sergej,

hmmm - Frames seh ich da keine.

Änder mal:

Code:

htmltest { margin: 0; background: url(design/test.png) no-repeat top left; }

neu:

Code:

html { background: url(design/test.png) no-repeat top left; } body { background-color:#848484; margin: 0; padding: 0; ... }

Grüße
Bernhard

Das war jetzt nur eine Testseite, deinen Code habe ich schon Versucht, jedoch verwende ich auch <html> in meinem Frames, deshalb kommt dies nicht in Frage. htmltest habe ich es nur genannt, weil ich es nicht verwenden will xD

Efchen · 15 Mai 2009

Du musst nur dafür sorgen, dass Dein div#bg2 hinter der table.tabelle2 liegt. Das erreichst Du, wenn Du beide Elemente absolut positionierst, und div#bg2 einen z-index gibst, der kleiner ist als der der Tabelle. z-indexe sollten immer positiv sein, sonst gibt es einige Browser, die Elemente mit negativem z-index nicht anzeigen (Firefox2, hatte ich selber vor kurzem, das Problem).
Erfolgreich auf Deiner Testseite getestet.

Alternativ gibst Du dem body oder html ein anderes Hintergrundbild, was vielleicht schöner wäre, um die absolute Positionierung zu vermeiden (eh, moment, ging z-index nicht auch mit relativer Positionierung? Ja, stimmt, aber zumindest div#bg2 muss absolut positioniert sein, damit es komplett aus dem Fluss genommen wird). Das Hintergrundbild vom body auf Deiner Testseite ist ja nun eh überflüssig, da es sich um ein einfarbiges Bild handelt.

Die Tabelle nimmst Du ja sicher noch raus, denn die ist ja semantisch falsch.

sergej59 · 15 Mai 2009

Danke Efchen, hat alles geklappt :)
Aber mir ist immer noch unklar, washalb bg2 nicht
wirklich top left ist ?
Index of /test

Efchen · 15 Mai 2009

Wieso? Ist es doch.

"top left" beim Hintergrundbild bezieht sich ja auf die Position im Element, nicht im Viewport.

Dein div#bg2 ist natürlich nicht top/left, weil Du das dem Element ja auch nicht gesagt hast. Du sagst nur "position:absolute". Damit wird es aber an der Stelle platziert, wo sich der Textfluss gerade befindet. Und da der body ein margin von 3% und ein padding von 2% hat, liegt das Element 5% von oben und 5% von links entfernt.

sergej59 · 15 Mai 2009

Efchen schrieb:
Wieso? Ist es doch.

"top left" beim Hintergrundbild bezieht sich ja auf die Position im Element, nicht im Viewport.

Dein div#bg2 ist natürlich nicht top/left, weil Du das dem Element ja auch nicht gesagt hast. Du sagst nur "position:absolute". Damit wird es aber an der Stelle platziert, wo sich der Textfluss gerade befindet. Und da der body ein margin von 3% und ein padding von 2% hat, liegt das Element 5% von oben und 5% von links entfernt.

Und wie kann ich das für bg2 aufheben ?
Sogar wenn ich bg2 nicht im body definiere, ist es dort wo der
Textfluss ist.

castshfan · 15 Mai 2009

sergej59 schrieb:
jedoch verwende ich auch <html> in meinem Frames, deshalb kommt dies nicht in Frage

Das verstehe ich jetzt nicht, was hat das eine mit dem anderen zu tun?

Wenn du auf einer Seite in einen Frame HTML einen Wert zuweisst, dann hat das nichts mit den Seiten die in den anderen Frames angezeigt werden sollen (und deren HTML-Bereich) zu tun.

Und dann frage ich mich, wieso du eine Tabelle benutzt?

Efchen · 18 Mai 2009

sergej59 schrieb:
Und wie kann ich das für bg2 aufheben ?
Sogar wenn ich bg2 nicht im body definiere, ist es dort wo der
Textfluss ist.

EIn Element soll ja auch da sein, wo der Textfluss ist. Das ist wie beim Schreiben auf ein Papier, der Stift definiert den Textfluss.

Für bg2 kannst Du das nicht aufheben, den Grund dafür, warum bg2 nicht oben links am Rand klebt, hab ich Dir ja genannt. DA musst Du anpacken. Lies nochmal nach.

sergej59 · 19 Mai 2009

So, nun habe ich hinbekommen, alelrdings klappr das nur, solange
mein Text in einer Tabelle steht und bg2 in einem div, sobald
ich meinen Text auch in einen div packe, wie es auchs ein soll,
krigt bg2 nicht mehr oben sondern auf der höhe meines divs,
wo der Text drinn ist.

Mit Tabelle: http://sergej59.se.funpic.de/test/test2.html
Mit div: http://sergej59.se.funpic.de/test/test.html

Woran liegts diesmal ?

Efchen · 20 Mai 2009

Efchen schrieb:
Dein div#bg2 ist natürlich nicht top/left, weil Du das dem Element ja auch nicht gesagt hast. Du sagst nur "position:absolute".

Es hat sich in der Beziehung noch nichts geändert.
Du sagst Deinem div#bg2 nicht, wo es stehen soll!

Wie wärs mit "top:0; left:0;"?

P.S.: Schmeiß das <center> raus, das hat im HTML-Code nichts mehr verloren.

sergej59 · 20 Mai 2009

Danke, funktioniert .
Die <center> habe ich schon gestern entfernt.:)

sergej59 · 21 Mai 2009

Ich versuche mich nun von den Frames zu verabschieden, haben
wirklich zu viele Nachteile xD

Doch bekomme ich es nicht ganz hin, meine divs wo der Text rein soll so zu positionieren, dass sie nicht über dem Navie sind.
Ich habe links ein Navi 200px breit, und rechts davon sollen das <div>Texte</div> hin. Dann sollten sich die Elemente nach dem 800px langem Navi wieder seitenzentriert sein, also so als ob kein navi da währe, sry ist bischen schwer zu erklähren.

http://sergej59.bplaced.net/TEST/

Weiteres Bild im Hintergrund positionieren ?

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied