• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Weiteres Bild im Hintergrund positionieren ?

S

sergej59

Neues Mitglied
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.
 
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 schrieb:
... oder dem bereits ohnehin vorhandenen Element "html", siehe Zwei Hintergrundgrafiken zuweisen
Zum Vergrößern anklicken....

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
Zum Vergrößern anklicken....

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 schrieb:
Freiwillig? Oder hat Dich jemand dazu gezwungen? Wie übel ist es?
Du solltest denjenigen anzeigen! ;-)
Zum Vergrößern anklicken....

Weißt du was :-P,
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>
 
Zuletzt bearbeitet:
sergej59 schrieb:
ich mache es freiwillig mit Frames,
Ich bin noch Anfänger und will selber meine Erfahrungen mit den Dingern
sammeln
Zum Vergrößern anklicken....
Das ist eine gute, akzeptable Begründung.

werde dann wahrscheinlich auch auf CSS umsteigen.
Zum Vergrößern anklicken....
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 ?
Zum Vergrößern anklicken....
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 ?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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 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
Zum Vergrößern anklicken....

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
 
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
Zum Vergrößern anklicken....

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
 
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.
 
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.
 
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.
Zum Vergrößern anklicken....

Und wie kann ich das für bg2 aufheben ?
Sogar wenn ich bg2 nicht im body definiere, ist es dort wo der
Textfluss ist.
 
sergej59 schrieb:
jedoch verwende ich auch <html> in meinem Frames, deshalb kommt dies nicht in Frage
Zum Vergrößern anklicken....
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?
 
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.
Zum Vergrößern anklicken....
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.
 
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".
Zum Vergrößern anklicken....
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.
 
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/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben