Hintergrundbild einfügen

html.de-Forum HTML, XHTML & CSS
1

Hallo :slight_smile:

ich bin hier ganz neu und sage schon mal vorweg, dass ich eigentlich mich mit HTML & CSS kaum auskenne.
Ich bin gerade dabei eine Hompage zu erstellen, die auch fast fertig ist, nur scheiter ich an diesem einen
Vorhaben. Ich möchte ein Hintergrundbild einfügen und habe bereits einen div-Bereich, in dem sich der ganze
Inhalt befindet. Damit der Rest nicht so leer und langweilig aussieht, will ich deshalb noch ein Background einfügen
nur klappt das überhaup nicht. Der div Bereich sieht so aus:
#Main {
background-color: #F6FBFC;
width: 700px;
margin: 28px;

Der Inhalt erstreckt sich über ca 3/4 der Seite. Der Rest rechts ist eben weiß. Dort möchte ich ein dezentes Hintergrundbild gerne einfügen. Wie mache ich das am besten? Ich hab es schon mit einem anderen div Versucht, aber
da kam völliger Quark raus :smiley: Es muss doch irgendwie möglich sein, hinter dem eigentlichen Inhalt ein Background einzufügen?
Ich hab eine extra Css-Datei. Wenn mir jemand einen Tipp geben könnte wäre das super :slight_smile:

Liebe Grüße

2

Hallo.

Am CSS das du gepostet hast kann es eigentlich nicht liegen (falls du die Klammer auch wieder geschlossen hast, ich nehme an das ist beim Copy & Paste verloren gegangen).

Zeig uns doch bitte mal den kompletten Code der Seite, HTML und CSS, damit man sich besser ein Bild machen kann.

Gruss
Elroy

3

Das ist der Code von HTML:

Hormone

Hormone

<div id="Main"

Text:


<img id"rechts" src=„Bilder/hormone-brain.jpg“ alt=„“ border=„0“ width=„170“ height=„210“>



Hormone als Dopingmittel


Hormone als Dopingmittel


Mehr Infos hier.

Und hier von der CSS-Datei:

body {
font-family: Verdana
font-size: 12px;
background-color :#FBF7FC

}
p {
text-align: justify;
}
h1 {
font-size: xx-large;
font-weight: bold;
text-align: left;
color: #000000;
}

h2 {
font-size: larger;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
}
h3 {
font-size: large;
font-weight: bold;
text-align: left;
}

h4 {
font-size: small;
font-weight: bold;
color: #EB58BF;
}
h5 {
font-size: small;
font-weight: bold;
color: #EB58BF;
}

#rechts2 {
float: right;
padding: 7px;
border: 0px solid #CCCCCC;
margin-bottom: 10px;
margin-left: 2px;
margin-top: 5px;
background-color: #F6FBFC

#rechts {
float: right;
padding: 20px;
border: 0px solid #CCCCCC;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 5px;
background-color: #F6FBFC
}

#bild {
float: right;
padding: 5px;
border: 0px solid #CCCCCC;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 2px;
margin-top: 10px;
background-color: #F6FBFC
}
bild3 {
padding: 30px;
float: right
margin-left: 80px;
margin-top: 20px;

}

#pfeil {
align: left;
margin-right: 50px
position: absolute;
}

#pfeil2{
align: right

}

h6 {
font-size: large;
text-decoration: underline;
text-align: left;
}

}
div {
background-color: #F5D8F3;
width: 740px;
padding: 6px;
margin: 28px
}

#Main {
background-color: #F6FBFC;
width: 700px;
margin: 28px;

}
#divh3 {
background-color: #F5D8F3;
width: 680px;
margin: 0.5px;
margin-top: 10px;

}
#umrahmung {
background-color: #F5D8F3;
width: 500px;
margin: 4px;
}

#navi {
margin: 7px;
margin-right:10px;
padding: 9px;
float: left;
list-style-type: none;
}

#navi2 {
margin: 7px;
margin-right: 30px;
padding: 9px;
float: left;
list-style-type: none;
}

#navi a {
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-decoration: none;
width: 230px;
height: 32px;
display: block;
color: #110704;
background-color: #F5D8F3;
text-align: center;
line-height: 26px;
border-bottom: 7px solid #fff;
float: left
padding-top: 2px;
padding-bottom: 3px
margin:0;

}

li:hover {
curser: pointer

4

Ist schon mal falsch wegen des doppelten Doctypes und HTML 4 wird seit der Jahrtausendwende nicht mehr verwendet. Außerdem wurden die Floats nicht cleared. Stelle die Seite solange zurück, bis du das notwendige Grundlagenwissen erworben hast.

5

Du hast also 2001 schon HTML5 benutzt? Respekt!

@Liberte - Du soltest dir mal ganz gründlich ein HTML Grundgerüst anschauen.
Zum Beispiel beendet ein Dokument, danach kommt nichts mehr.
Bei dir sieht das anders aus.
[HTML]

Hormone als Dopingmittel


Mehr Infos hier.

[/HTML] Fällt dir an deinem Code etwas auf? Du hast ungefähr ein dutzend solcher Fehler drin, da ist jede Hilfe zwecklos. Wie Tronjer schon gesagt hat, die HTML Grundlagen lernen und dann nochmal ganz von vorne anfangen.

Gruss
Elroy

6

Erstmal danke für die Antworten.
@ Trojaner und Elroy
Ich habe mir das Programm nicht ausgesucht zum arbeiten :wink:
Aber danke für die Hinweise, diese gravierenden Fehler sind mir komischer Weise nicht aufgefallen, da ja trotzdem alles bisher funktioniert hat. Ich hab es nach dem Grundschema jetzt verändert.
Ist es jetzt etwas besser?

Hormone

Hormone

<div id="Main"

Text:


<img id"rechts" src=„Bilder/hormone-brain.jpg“ alt=„“ border=„0“ width=„170“ height=„210“>



Hormone als Dopingmittel

Hormone als Dopingmittel


Mehr Infos hier.

Was mit den „dutzenden“ Fehlern gemeint ist, weiß ich nicht. Meinst du irgendwas mit dem Einrücken der Befehle stimmt nicht?

7

Hallo

Was mit den „dutzenden“ Fehlern gemeint ist, weiß ich nicht.

Den Quelltext schlicht sachlich korrekt erstellen. Das sind Grundlagen die zunächst beherrscht werden sollten, bevor man mit dem Erstellen von Webseiten beginnt.

Als Beispiele nur mal

[CODE]

[/CODE]

Das p-Element hat hier überhaupt nichts verlorenl.

<div id="Main" <br>

Hier wird das div-Element nicht geschlossen.

[CODE]

    [/CODE]

    An dieser Stelle darf das h6-Element nicht stehen.

    u.s.w.

    Außerdem werden einige Elemente unsinnig genutzt, zum Beispiel die br-Elemente, die nicht dafür gedacht sind Abstände zu schaffen.

    Ähnliches gilt für den CSS-Teil. Da fehlen abschließende Semikolon, Klammern fehlen oder sind doppelt vorhanden …

    Gruss

    MrMurphy

8

Okay ich habe jetzt einiges geändert, hinzugefügt etc.
Wie wird jetzt am besten ein Hintergrundbild hinter bzw. neben dem eigentlich Inhalt eingefügt?

9

Ich hab es jetzt einfach mit dem background-image - Befehl versucht, dass auch auch wunderbar geklappt hat.
Nur sieht das etwas doof aus, ich brauche das Hintergrund bild ausschließlich neben, also rechts von meinem Inhalt. Das müsste doch durch div irgendwie machbar sein oder?