73%
22%
19%
11%
6%
- 1
- 2
Mittwoch, 28. November 2007, 20:20
2 hintergrundbilder?
hi@all!
ich habe folgendes problem:
ein bild solll im hintergrund left - bottom sein und das andere right - bottom! gibts dafür eine lösung?
das ist das css fürs linke:
kann ich jetzt irgendwie noch einen layer rechts bottom machen
... beim googeln kam nix raus, ausser einmal ja, mit nicht nachvollziehbaren erklärungen, bis hin zu nein
ich habe folgendes problem:
ein bild solll im hintergrund left - bottom sein und das andere right - bottom! gibts dafür eine lösung?
das ist das css fürs linke:
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css">
body
{
background-image:
url('fire.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-attachment:fixed; <!-- ff-trick, damit das bild unten bleibt//-->
}
</style>
|
kann ich jetzt irgendwie noch einen layer rechts bottom machen
... beim googeln kam nix raus, ausser einmal ja, mit nicht nachvollziehbaren erklärungen, bis hin zu nein
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 20:41
danke. des war genau die sorte von antworten die ich meinte; ja es geht ... aber halt unbestimmt ... gibts da für das rechte pic konkret an code?
nennen wirs mal pic.jpg, das rechte und lassen das linke dort wo es ist
.
der entsprechende img-tag dürfte nicht länger werden als deine obige antwort :::
nennen wirs mal pic.jpg, das rechte und lassen das linke dort wo es ist
.der entsprechende img-tag dürfte nicht länger werden als deine obige antwort :::
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 20:56
sry entweder stehe ich jetzt komplett daneben oder:
zeigt nur das linke bild, das rechte wird damit nicht gezeigt
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style type="text/css">
body
{
background-image:
url('fire.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-attachment:fixed;
span#pic_right { float:right;
margin-top:100% /* kann man ja anpassen */
background-image: url(right.jpg) no-repeat ;}
}
</style>
|
zeigt nur das linke bild, das rechte wird damit nicht gezeigt
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 21:01
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 |
<style type="text/css">
body {
background-image: url('fire.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed; }
span#pic_right {
float: right;
margin-top:100%; /* kann man ja anpassen */
background-image: url(right.jpg) no-repeat ;}
</style>
|
Das ist jetzt zumindest richtiger css-code...aber ob das funktioniert
Edit: Dieser Post enthält nur den verbesserten Code von vorhin und geht nicht auf den Post über diesem hier ein.
P.S. Du weißt aber schon wovon du redest, andreaskeil?
Don't Panic!
Echte Zombies rennen nicht!
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Heini« (28. November 2007, 21:03)
Mittwoch, 28. November 2007, 21:14
nein sry andreaskeil, wie heini vermutete, es klappt einfach so nicht, bitte warum soll ich background-repeat raus? ... will doch nicht alles zupflastern mit dem linken bilderl ich will noch ein rechtes unten >
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 21:22
RE: 2 hintergrundbilder?
Zitat
Original von webmastersworld
ein bild solll im hintergrund left - bottom sein und das andere right - bottom! gibts dafür eine lösung?
Naja, also als Background geht sowas meines Wissens nach nicht. Da kannste nur eins verwenden. vll lassen die sich für CSS3 mal was einfallen.
Aber was gehen könnte ist, dass du zwei DIVs erstellst und in das jeweilige DIV das entsprechende Bild per Hintergrund einfügst. Dabei im style den befehl "position:relative;" anwenden.
Der nachteil ist, du musst dann jedes DIV mit Relativ ausrichten. Hat aber den vorteil, dass du kein "margin" verwenden musst.
Was anderes fällt mir jetzt auch nicht ein.
|
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style type="text/css">
#pic_left {
left:0px; /* Richtet das Bild links aus */
bottom:0px; /* Richtet das Bild unten aus */
width:200px;
height:300px;
background-image: url(left.jpg) no-repeat;
z-index:1; /* Musst ggf. andere Layer mit einem höheren z-index belegen */
}
#pic_right {
right:0px; /* Richtet das Bild rechts aus */
bottom:0px; /* Richtet das Bild unten aus */
width:200px;
height:300px;
background-image: url(right.jpg) no-repeat;
z-index:1; /* Musst ggf. andere Layer mit einem höheren z-index belegen */
}
</style>
|
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Rene82« (28. November 2007, 21:22)
Mittwoch, 28. November 2007, 21:41
@rene82:
mit dem code sind beide pics weg
... oder muss ich jetzt die pics auch nochmal im <body> platzieren
mit dem code sind beide pics weg
... oder muss ich jetzt die pics auch nochmal im <body> platzieren
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »webmastersworld« (28. November 2007, 21:42)
Mittwoch, 28. November 2007, 21:47
und so?
EDIT: nein musst du nicht
|
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css">
#pic_left{
left:0px; /* Richtet das Bild links aus */
bottom:0px; /* Richtet das Bild unten aus */
width:200px;
height:300px;
position:absolute;
background-image: url(left.jpg);
background-repeat:no-repeat;
z-index:1;
}
#pic_right{
right:0px; /* Richtet das Bild rechts aus */
bottom:0px; /* Richtet das Bild unten aus */
width:200px;
height:300px;
position:absolute;
background-image: url(right.jpg);
background-repeat:no-repeat;
z-index:1;
}
</style>
|
EDIT: nein musst du nicht
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Rene82« (28. November 2007, 21:50)
Mittwoch, 28. November 2007, 21:54
nein 
sry
sry
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 22:00
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke
Mittwoch, 28. November 2007, 22:05
ja gerade nochmal gechecked
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 22:09
HTML-Code
Sollte so eigentlich funktionieren. Wichtig ist, dass du die Breite und Höhe des Bildes absolut angibst. Also die richtige Breite und Höhe in Pixeln (px) sonst wird das Bild nicht angezeigt.
Wenn es nicht funktioniert, Poste mal bitte ein Link zu der Seite, dann helfe ich dir gerne.
|
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
...
<head>
<title>2 Bilder</title>
<style type="text/css">
#picture_left {
background-image: url(pfad/zum/bild_links.jpg);
background-repeat: no-repeat;
position: absolute;
bottom: 0px;
left: 0px;
width: Bildbreite in px;
height: Bildhöhr in px;
}
#picture_right {
background-image: url(pfad/zum/bild_rechts.jpg);
background-repeat: no-repeat;
position: absolute;
bottom: 0px;
right: 0px;
width: Bildbreite in px;
height: Bildhöhr in px;
}
</style>
</head>
<body>
<div id="picture_left"><!-- --></div>
<div id="picture_right"><!-- --></div>
</body>
...
|
Sollte so eigentlich funktionieren. Wichtig ist, dass du die Breite und Höhe des Bildes absolut angibst. Also die richtige Breite und Höhe in Pixeln (px) sonst wird das Bild nicht angezeigt.
Wenn es nicht funktioniert, Poste mal bitte ein Link zu der Seite, dann helfe ich dir gerne.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »iXtends« (28. November 2007, 22:13)
Mittwoch, 28. November 2007, 22:15
Original von webmastersworld
ja gerade nochmal gechecked
und gehts jetzt?
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke
Mittwoch, 28. November 2007, 22:48
ja thx - ich habe jetzt beide hintergrundbilder right/left ... ABER in einer tabelle über dem linken unteren bild war ein flash (swf), das ist jetzt weg
... mir kommt aber vor bei reloads der seite, dass es HINTER dem linken bild ist, das wäre vom platz her ok. es sollte das swf ÜBER dem bild sein und nicht dahinter
- ich habe jetzt beide hintergrundbilder right/left ... ABER in einer tabelle über dem linken unteren bild war ein flash (swf), das ist jetzt weg... mir kommt aber vor bei reloads der seite, dass es HINTER dem linken bild ist, das wäre vom platz her ok. es sollte das swf ÜBER dem bild sein und nicht dahinter
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Mittwoch, 28. November 2007, 22:51
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke
- 1
- 2