[css] image am layer rand positionieren...

HsF_Hellsing · 11. Nov. 2004

hallo Leute..

Ich brauche eine möglichkeit wie ich ein Bilde am untersten rand eines
css-layers positionieren kann... geht das?
Müsste sich der länge des layers anpassen.. (inhalt variabel)

so in der art vielleicht....?

Code:

#content {
width:550px;
position: absolute;
top: 200px; 
left: 225px;
image-position:bottom;
}

soetwas in der art...

hat einer von euche eine idee??

MfG danke schon mal im vorraus

Hellsing

dkdenz · 11. Nov. 2004

Hier hast Du erstmal einen Ansatz:

Code:

DIV
{
Background-Image: url(filename.xyz);
Background-Position: bottom;
Background-Attachment: fixed;
Background-Repeat: repeat-x;
}

Das sich das Pic mit dieser Variante der Breite anpasst geschieht dann so,
dass bei geringerer Breite einfach der entsprechende rechte Teil fehlt.
Bei größerer Breite fängt das Pic an sich horizontal zu wiederholen.

HsF_Hellsing · 12. Nov. 2004

Danke für deinen Tipp...

aber das problem ist ich habe schon ein anderes Hintergrund-Bild..!
ist also relativ ungeschickt. Gibts ne andere Möglichkeit oder eine wie mein zwei verschiedene Hintergerundbilder
einfügen kann??

MfG
Hellsing

HsF_Hellsing · 21. Dez. 2004

Hat denn keiner ne idee?
muss doch ne möglichkeit geben dass ich sowohl and den linken als auch den rechten rand eine
Hintergrundgrafik setzen kann.
Bräuchte dringend Hilfe
MfG

Hellsing

dkdenz · 21. Dez. 2004

Code:

#content {
position: absolute;
width:550px;
top: 200px; 
left: 225px;
background:transparent;
background-image: url(filename.xyz);
background-position: bottom left;
z-index:1;
}
#content2 {
position: absolute;
width:550px;
top: 200px; 
left: 225px;
background:transparent;
background-image: url(filename.xyz);
background-position: bottom right;
z-index:2;
}

HsF_Hellsing · 22. Dez. 2004

Danke für deine Hilfe, aber ich glaub du hast mich flasch verstanden.
Ich suche eine Möglichkeit wie ich im selben Layer zwei verscheidene HIntergrundgrafiken positionieren kann.

Kann auch sein dass ichs nur net blick dann wär eine Erklärung sehr nett.

DAnke nochmal
Hellsing

dkdenz · 22. Dez. 2004

Du kannst in einem Objekt keine 2 Angaben referenzieren....

dkdenz · 22. Dez. 2004

An sich braucht das keine Erklärung,
aber für Dich:

Code:

[B]#content [/B]{
position: absolute;
width:550px;
top: 200px; 
left: 225px;
background:transparent;
background-image: url(filename.xyz);
background-position:[B] bottom left[/B];
[B]z-index:1;[/B]
}
[B]#content2[/B] {
position: absolute;
width:550px;
top: 200px; 
left: 225px;
background:transparent;
background-image: url(filename.xyz);
background-position: [B]bottom right[/B];
[B]z-index:2;[/B]
}

bedeutet:
Du machst zwei identische Divs, aber mit einem verschiedenen z-index.
Die liegen nun übereinander.
Hast Du's ausproboert oder was bringt Dich zur Erkenntniss,
das dass nicht funktioniert?

HsF_Hellsing · 22. Dez. 2004

Also wenn ich das
background:transparent;
drin habe ist der Hintergrund komplett schwarz.

Wenn ichs reinmache passiert überhaupt nichts??
bei mir siehts so aus:

HTML:

#background {
background-color:#424242;
position: absolute;
width:750px;
position: absolute;
background-image: url("/dateien/rand-main_r.gif");
background-position: bottom left;
background-repeat:repeat-y;
z-index:1;
border-style:double;
border-color:#006699;
border-width:3px;
border-left-width:0px;
border-top-width:0px;
}



#background2 {
background-color:#424242;
position: absolute;
top: 200px; 
left:125px;
width:750px;
position: absolute;
background-image: url("/dateien/rand-main_l.gif");
background-position: bottom right;
background-repeat:repeat-y;
z-index:2;
border-style:double;
border-color:#006699;
border-width:3px;
border-left-width:0px;
border-top-width:0px;
}

Mach ich was flasch oder was is?

HellsIng

dkdenz · 22. Dez. 2004

siehe unten...

dkdenz · 22. Dez. 2004

Korrekte Syntax bei CSS:
position kommt als erstes...
gibst Du width an, musst Du auch height angeben...

Code:

{
position: absolute;
width:750px;
height:auto;
background:#424242;
background-image: url(dateien/rand-main_r.gif);  /*lass die "" weg*/
background-position: bottom left;
background-repeat:repeat-y;
z-index:1;
border-style:double;   /*geht nicht---meines Wissens in keinem Browser*/
border-color:#006699;
border-width:3px;
border-left-width:0px;
border-top-width:0px;
}

HsF_Hellsing · 02. Jan. 2005

hallo!
Entschuldigung dass ich mich so spät erst melde aber Urlaub lässt sich nicht verschieben

bei mir sieht das ganze jetzt so aus: (wobei #background1 im dokument innerhalb von #background 2 liegt)

HTML:

#background1 {
position: absolute;
width:750px;
height:auto;
background-color:#424242;
background-image: url(/dateien/rand-main.gif);
background-position: bottom left;
background-repeat:repeat-y;
z-index:1;

}



#background2 {
position: absolute;
top: 175px; 
left:125px;
width:750px;
height:auto;
background-color:#424242;
background-image: url(/dateien/rand-main.gif);
background-position: bottom right;
background-repeat:repeat-y;
z-index:2;
}

mein Problem unveränert #background2 wird nicht angezeigt.

ich hätte noch eine idee wie es anders zu lösen wäre ich versuchs einfach mal.
Würde mich aber trotzdem nochmal über deine Hilfe freuen.

Danke für deine Geduld
Hellsing

dkdenz · 02. Jan. 2005

Ich habe mal ein wenig rumgetestet.
So siehts bei mir jetzt aus.
Scheint zu funktionieren, so wie's ist...

Code:

#background1{
position: absolute;
width:750px;
height:auto;
background-image: url(rand_main.gif);
background-repeat:repeat-y;
background-position: bottom left;
background-color:#ff0000;
z-index:1;
}
#background2{
position: absolute;
top: 175px;
left:125px;
width:750px;
height:auto;
background-image: url(rand_main.gif);
background-repeat:repeat-y;
background-position: bottom right;
background-color:transparent;
z-index:2;
}

Könntest Du eventuell diese Seite online anbieten oder sie komplett posten?

HsF_Hellsing · 02. Jan. 2005

Klar kann ich machen...
meinst du dass dokument oder die seite wo das script drauf ist (also den Link) ??

Hellising

HsF_Hellsing · 02. Jan. 2005

Hier ist der LINK: http://www.hellsfaction-clan.de/news.php

oder brauchst du was anderes??
Hellsing

dkdenz · 02. Jan. 2005

Tja, komische Sache das...
Irgendwie geht's nicht.

Wenn man background rausnimmt, sieht man den anderen erst.
Keine Ahnung auf die Schnelle, wie man das machen könnte.
Habe ich so komplex noch nicht ausprobiert.

Heute wird das aber nix mehr...

Du hast ja eine fixe Breite (750px).
Warum machst Du nicht ein Hintergrundbild mit beiden Rändern,
welches 750px breit ist und lässt es nach unten kacheln?

HsF_Hellsing · 02. Jan. 2005

Hab ich mir auch schon überlegt, dass problem ist dadurch dass das Hintergrundbild so lange ist( knapp 350px)
wäre das ein hintergrundbild mit maße 350:750 das is dann halt ne verdammt lange ladezeit...
Ich hab noch ne idee in meinem kopf probiers dann gleich mal aus sag dann bescheid wenns klappt.

Danke für deine Hilfe Hellsing

HsF_Hellsing · 03. Jan. 2005

Also ich hatte die idee dass ich einfach den darunterliegenden layer 50 pixel breiter mache, hat soweit auhc funktioniert nur das problem dass sich der darunterliegende layer nicht dem obigen anpasst. habs schon mit
height:auto; probiert hat aber nicht geklappt hast du ne idee?

Hellsing

[css] image am layer rand positionieren...

HsF_Hellsing

New member

dkdenz

New member

HsF_Hellsing

New member

HsF_Hellsing

New member

dkdenz

New member

HsF_Hellsing

New member

dkdenz

New member

dkdenz

New member

HsF_Hellsing

New member

dkdenz

New member

dkdenz

New member

HsF_Hellsing

New member

dkdenz

New member

HsF_Hellsing

New member

HsF_Hellsing

New member

dkdenz

New member

HsF_Hellsing

New member

HsF_Hellsing

New member