Bild als Hintergrund in Myspace einbinden (HTML)

fexplorer · 9. April 2009

Hallo zusammen,

ich hab mich jetzt mal angemeldet weil ich nicht mehr weiter weiss und ich hier immer wieder mal sehr hilfreiche Beiträge gefunden habe! Lesender Gast bin ich schon länger :).

Zuerst mal zu mir. Ich bin 28 Jahre alt, komme aus München, arbeite als Routertechniker.
Nebenbei bin ich Musiker und versuche momentan für einen Freund eine Myspace Seite zu erstellen. Soweit klappt das auch ganz gut nur macht mich jetzt eine Sache fertig.

Ich möchte links und rechts jeweils ein Bild als Hintergrund haben.
Ich füge die Bilder mit diesem Code ein und verändere dann die Werte bis das Bild an der Stelle ist wo ich es brauche:

links ist das kein Thema, das klappt super aber rechts verdeckt das Bild den Player und ich weiss nicht wie ich es in den Hintergrund verschieben soll. Ich habe eine Testseite angelegt auf der ich herumprobiere, "www.myspace.com/samosband" Bandname ist nur erfunden.... schaut ruhig mal drauf wenn ihr Zeit und Lust habt.

ändere ich "style=" in "backround=) ist das Bild fest und ich kann es nicht mehr verschieben

Also ich habe alles durchsucht konnte aber nichts dazu finden. Meistens wird man auf diese Generatorseiten verwiesen, die mir aber hier auch nicht helfen können. Da kann man auch nur "ein" Hintergrundbild uploaden.

Wäre klasse wenn mir jemand weiterhelfen kann, ich bin mir sicher es ist nicht alzu schwer aber ich weiss es halt nicht.

Vielen Dank
LG Fex.

lauras · 9. April 2009

Wieso bringst du nicht einfach beide Bilder auf ein Bild, sodass du nur eins einbinden musst?

Ansonsten würde ich sagen, du machst zwei div-Container und positionierst die beiden so, wie du sie haben willst. Dann legst du für jeden der div-Container ein Hintergrundbild fest.

BSP:
HTML:

Code

<div id="box1"></div>
<div id="box2"></div>

CSS:

Code

#box1 {
float: left; 
margin: 10px;
padding: 20 px;
background-image: url (bild1.jpg);
}




#box2 {
float: right;
margin: 10px;
padding: 20px;
background-image: url (bild2.jpg);
}

Alles anzeigen

Verstehst?

LG
Laura

fexplorer · 9. April 2009

Hallo, vielen Dank für deine Antwort!

Ich fange gerade an mit HTML und CSS und lerne immer jeden Tag bisschen was dazu. Bis jetzt habe ich diese Myspace Generatoren verwendet und für mich privat ist das auch genug aber eine professionelle Seite bekommt man damit nicht.

Also ich fürchte ich kann Dir nicht so ganz folgen :).

Wenn du mal Zeit hast schau mal kurz auf mene Fakeseite. Dort ist rechts ein Bild von einem Gitarrenspieler (mein Lehrer) Links soll ein Saxophonspieler hinkommen. Wenn ich ein einzelnes Bild nehme würde ich die beiden nicht so trennen können. Das mittlere soll ja schwarz bleiben. Da sollen später dann mal Tourdaten usw. drauf.

div Container, da habe ich das hier, mit Positionsangabe, zB.

meinst Du das?

Binde ich aber Bild noch mit ein bekomme ich wieder einen festen Hintergrund der sich nicht verschieben lässt (in Myspace)

Wenn du Lust und Zeit hast, erklärs mir nochmal extra langsam :),

ich werd jetzt erstmal ne Runde Radeln, hab schon Quadrataugen vom ganzen Lesen :), und später das Internet nach Div container und Boxen durchsuchen

Hab vielen Dank!

LG

lauras · 9. April 2009

Also... dann fang ich mal ganz vorne an

Was ein div-Container ist weißt du denke ich.

Wenn ich dich recht verstehe, möchtest du einen div, in dem die ganze Seite drin ist. Also nimmst du davon einen und packst, sagen wir mal drei noch darein.
Ca. So:

Code

_____________________________________
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|       |                |          |
|_______|________________|__________|

Alles anzeigen

Wenn ich da falsch liege lass es mich bitte wissen.

Nehmen wir also an, der linke ist box1, der in der mitte box2 und der rechte box3.

Soweit klar?

Am besten du verfolgst die Schritte mit

So, dann machen wir diese drei divs erstmal:

Code

<head>
<style type="text/css">
<!--




-->
</style>
</head>




<body>




<div></div>
<div></div>
<div></div>




</body>

Alles anzeigen

Nun liegen die alle untereinander. Um sie nebeneinander zu bekommen, nehmen wir float. Das kommt in die CSS. Dazu benennen wir jetzt die drei divs auch mal im Code, per id. id erscheint in der CSS als #. Um das ganze besser erkennen zu können gebe ich jetzt mal jedem div eine Farbe. Jetzt bekommt noch jeder div ein float und fertig.:

Code

<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
}




#box2 {
background-color: blue;
float: left;
}




#box3 {
background-color: yellow;
float: left;
}
-->
</style>
</head>




<body>




<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>




</body>

Alles anzeigen

In der Browservorschau sieht man jetzt nix, da die divs ja noch keine Höhe haben. Also Höhe rein (und Breite auch), um das ganze zu verdeutlichen.:

Code

<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
height: 10px;
width: 200px;
}




#box2 {
background-color: blue;
float: left;
height: 10px;
width: 200px;
}




#box3 {
background-color: yellow;
float: left;
height: 10px;
width: 200px;
}
-->
</style>
</head>




<body>




<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>




</body>

Alles anzeigen

So, jetzt hast du schonmal drei Container nebeneinander.

Wenn du jetzt einfach in jeden Container ein Bild oder Hintergrundbild einfügst, je nachdem ob du noch Text hast oder nicht, hast du das, was du wolltest.

Bsp:

Code

<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
height: 10px;
width: 200px;
}




#box2 {
background-image: url(bild2.jpg);
float: left;
height: 10px;
width: 200px;
}




#box3 {
background-color: yellow;
float: left;
height: 10px;
width: 200px;
}
-->
</style>
</head>




<body>




<div id="box1">
    Hallo, <br />
    das ist die erste Box,<br />
    mit Bild unter Text.<br />
    <img src="bild1.jpg" />
</div>




<div id="box2">
    Hallo,<br />
    das ist die zweite Box,<br />
    mit Text auf (nicht vorhandenem) Hintergrundbild!<br />
</div>




<div id="box3">
    <img src="bild3.jpg" /><br />
    <img src="bild4.jpg" />
</div>




</body>

Alles anzeigen

So. in der ersten Box hast du ne Hintergrundfarbe mit Text und Bild, in der zweiten den Text auf dem Hintergrundbild und in der dritte einfach zwei Bilder.

Noch Fragen?

fexplorer · 9. April 2009

Hi Laura,

also wow, vielen, vielen Dank, dass du Dir dafür die Zeit nimmst! Ich glaube das ist genau das was ich suche. Ich werd jetzt gleich mal das basteln anfangen

nochmals danke!!

LG Alen

lauras · 9. April 2009

Kein Problem, hab ja nix zu tun, wozu hat man schließlich Ferien

Wenn du noch Fragen hast, frag einfach:)

LG

Bild als Hintergrund in Myspace einbinden (HTML)

Jetzt mitmachen!

Teilen