Hintergrundbild in div

kornyclown · 06.07.2012

Wie manche bestimmt schon wissen bin ich grad dabei meine Homepage von Flash auf HTML/CSS umzubauen. Dazu habe ich mir schon die Tutorials zum Thema HTML5 und CSS3 von Pascal Bajorat angesehn aber da ich einige Sachen etwas anders haben will funktionieren sie natürlich bei mir wieder nich.

Ich möchte das mein Hintergrund aus zwei Grafiken besteht einem Balken links, einem rechts. In dem Tutorial wird die Hintergrundgrafik einfach in dem html Tag über die CSS-Styledatei eingebunden. Das will ich aber nich. Damit ich den Hintergrund zum Schluss mit der restlichen Seite zentrieren kann wollte ich alles zusammen in einen wrapper stecken, dazu müssen die Tags, in dem die Hintergrundgrafik eingebunden ist aber im Body sein also wollte ich das mit zwei div-Containern machen. Aber wenn ich das mache wird kein Hintergrundbild angezeigt.
Was läuft da falsch, bzw was muss ich machen damit es geht?

randacek_pro · 06.07.2012

AW: Hintergrundbild in div

Müsste doch eigentlich gehen, wenn du den div gleich unterhalb des body-Tags anlegst und in diesen div dann deine zwei weiteren "gewrappten" divs anlegst, denen du je eine Klasse ".right" und ".left" zuweist. In einem dritten div kommt dann dein Content rein. Diese beiden div-Klassen kannst du ja ganz einfach am rechten und linken Rand ausrichten und in diese auch über CSS das jeweilige Background-Image einbinden.
Oder verstehe ich da jetzt was falsch?

Viele Grüße

kornyclown · 06.07.2012

AW: Hintergrundbild in div

Also das habe ich bis jetzt und da wird mir nichts angeigt.

HTML:

<body>

<div class="wrapper">
<div class="bgleft"></div>
<div class="bgright"></div>
</div>


</body>

CSS:

Code:

*{padding:0; margin:0;}

html, body{min-width:100%; height:100%;}

.wrapper{width:900px; margin:auto;}
div.bgleft{background:url(../images/BG_left2.png) repeat-y left top;}
div.bgright{background:url(../images/BG_right2.png) repeat-y right top}

AukeArts · 06.07.2012

AW: Hintergrundbild in div

Manchmal sieht man den Wald vor lauter Bäume nicht. Ich bin gerade dein Beispiel durchgegangen und konnte einfach keinen Fehler finden ... aber dann kam mir die rettende Idee. Damit so ein Div funktioniert, muss es mindestens eine Höhen- oder Breitenangabe haben.

In deinem Fall ja dann eine Breitenangabe. Also

div.bgleft{width:450px; background:url(../images/BG_left2.png) repeat-y left top;} div.bgright{width:450px; background:url(../images/BG_right2.png) repeat-y right top;}

Dann klappt es auch.

randacek_pro · 06.07.2012

AW: Hintergrundbild in div

Vereinfacht gesagt: du hast zwar divs angegeben, aber nicht, dass sie irgendwelche Dimensionen haben

Also die divs sind quasi nicht sichtbar, weil sie keine Höhe und Breite haben. Wenn du height und width ergänzt sollte das schon mal gehen. Sonst muss ich mir das noch mal genauer angucken, bin ziemlich im Stress weils hier ringsrum gewittert und ich gucken muss, dass der Keller trocken bleibt...

Edit:
Oh, da war AukeArts schneller

kornyclown · 06.07.2012

AW: Hintergrundbild in div

Ich hab echt das Gefühl das wir der Sache näher kommen, die Erklärung mit den Dimensionen klingt echt plausibel und macht voll Sinn aber ich seh auch unter Angabe der Weite nichts.
Ich habe mal testweise in die div-Container "test" geschrieben und dann seh ich meine Hintergrundgrafik entsprechend der Dimensionen des Wortes test. Das lässt mich vermuten, dass beim verlinken der Bilder etc kein Fehler vorliegt. Wenn ich "test" aber raus nehme und nur die Weite angebe (alles richtig geschrieben) dann sehe ich wieder nichts.

AukeArts · 06.07.2012

AW: Hintergrundbild in div

Okay, dann musst du doch beide Angaben machen ~ also Height und Width. Height kann man auch automatisieren, jedoch weiß ich nicht wie das klappt. 100% funktioniert irgendwie nicht. Ansonsten sieht bei mir die Verlinkung so aus.

#bgleft{width:450px; height:450px; background:url(images/deinbild.jpg) repeat-y right top;}

mindraper · 07.07.2012

AW: Hintergrundbild in div

hi.

@korny:
dass du nichts siehst, wenn du die weite angibst ist irgendwie logisch

ein <div> ist ein sog. "block-element", das bedeutet, es hat "von natur aus" eine breite von 100% (also den gesamten raum, der ihm im umgebenden element zur verfügung steht) und ordnen sich deshalb untereinander an. etwas anders sieht es da bei der höhe aus. die höhe richtet sich, sofern nicht anders angegeben, nach dem inhalt + evtl. border, margins, paddings.

ich kann dich schon sagen hören "och nööö" (jaaaa, ich hab gute ohren

), aber da du 2 <div>-container in deinem wrapper liegen hast und sich die divs ja untereinander anordnen und beide keine höhe haben, kannst du natürlich erstmal nichts sehen.

übernimm doch einfach mal das hier in dein css, dann wirst du sehen was ich meine:

#wrapper div {
height: 200px;
}

da du die beiden divs mit jeweils einer klasse versehen hast (bgleft und bgright), nehme ich an, du möchtest diese beiden eben links und rechts haben. dafür musst du diese beiden entweder floaten oder absolut positionieren. ich rate mal zum absoluten positionieren, da du ansonsten den divs keine höhe von 100% geben kannst (auf gefloateten elementen greifen nur fixe angaben, also: px), absolut positionierte elemente können auch eine relative angabe verarbeiten in der höhe.

allerdings wären dan cederholms "faux columns" warscheinlich so oder so besser für deine zwecke geeignet.

bei der variante mit den 2 div-containers also (CSS):

Code:

* {
   margin: 0;
   padding: 0;
}

.wrapper {
   /* damit sich die divs an #wrapper ausrichten, sonst am browserfenster */
   position: relative;
   width: 900px;
   height: 100%; /* höhe = kompletter browser */
   margin: 0 auto; 
}

.bgleft, .bgright {
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
}

.bgleft {
   left: 0;
   background: transparent url(../images/BG_left2.png) repeat-y 0 0 scroll;
}

.bgright {
   right: 0;
   background: transparent url(../images/BG_right2.png) repeat-y 0 0 scroll;
}

dann sollte es wohl auch mit den nachbarn... oder so...

hoffe das hilft

kornyclown · 07.07.2012

AW: Hintergrundbild in div

Also das is doch zum Mäuse melken. ich hab das jetzt so übernommen aber da passiert immer noch nichts.
Hier nochmal ein Überblick über das was ich jetzt hab:

HTML:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">
<title>Thomas Manz.de | VFX</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div class="wrapper">
<div class="bgleft"></div>
<div class="bgright"></div>
</div>

</body>

</html>

Code:

@charset "UTF-8";
/* CSS Document */

* {
    padding: 0; 
    margin: 0;
}

.wrapper {
    position: relative; 
    width: 900px; 
    height: 100%; 
    margin: 0 auto;
}

.bgleft, .bgright {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
}

.bgleft {
    left: 0;
    background: transparent url(../images/BG_left.png) repeat-y 0 0 scroll;
}

.bgright {
    right: 0;
    background: transparent url(../images/BG_right.png) repeat-y 0 0 scroll;
}

Ich hab auch nochmal die Grafiken auf richtige Schreibweise und so, einige male gegengecheckt.

P.S. Hier in der letzten Zeile:
.bgright {
right: 0;
background: transparent url(../images/BG_right.png) repeat-y 0 0 scroll;
}
wird mir das "right:" rot gehighlightet, warum?

EDIT:
Vergesst es. Ich hab jetz noch weiter rumprobiert und jetz geschaft (fürs erste).
Ich musste im Style sheet noch

Code:

html, body {min-width: 100%; height:100%;}

einfügen. Jetz klappts erstmal.
Vielen Dank, ich freu mich.