• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV mit Hintergrundbild

soulxheart

Mitglied
Guten Tag

Ich spiele momentan ein wenig rum und bin etwas verwirrt.

Und zwar möchte ich div für div untereinander platzieren. Jedes div hat ein anderes Hintergrundbild.

Mein Problem ist, dass die Hintergrundbilder zwar angezeigt werden, aber nicht wirklich korrekt. Der Text innerhalb des divs wird gar nicht und wenn, dann irgendwie unterhalb des divs angezeigt.

Das ist der bisherige Code:

HTML:
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="main.css" />
    <meta charset="utf-8">
</head>
<body>
<div id="content">
    <div id="container_one">
            <h1>Test-Überschrift</h1>
            <p>Testabsatz.</p>
    </div>
    <div id="container_two">
        <h1>Test-Überschrift</h1>
        <p>Testabsatz</p>
    </div>
</div>
</body>
</html>

[css]
* {
margin:0px;
padding:0px;
}

body {
background-color:rgb(255,255,255);
font-family:"Lucida Sans Unicode","Lucida Grande",Trebuchet MS,Tahoma,Arial,sans-serif;
}

div#content {
width:100%;
border:5px solid red;
}

div#container_one {
width:100%;
background:url(bg_mountain.jpg) no-repeat;
background-color:rgb(255,255,255);
boder:5px solid red;
padding:20px;
}

div#container_one {
width:100%;
background:url(bg_sunset.jpg) no-repeat;
background-color:rgb(255,255,255);
boder:5px solid red;
padding:20px;
}
[/css]

Das kann doch nicht so schwer sein, oder? Wahrscheinlich ist es mal wieder etwas völlig simples...



Grüsse
 
div-Elemente sind Blockelemente die automatisch bereits eine Breite von 100% haben. Diese Angabe kannst Du also weglassen.

Außerdem hast Du bei den beiden container-IDs das Wort "boder" falsch geschrieben. Es müsste "border" heißen.

Einen Grund wieso die Texte in deinem Beispiel über die Hintergründe hinaus verlaufen, kann ich momentan nicht erkennen. Ich vermute die Bilder sind zu klein, so dass die Texte evtl. am Ende oder unterhalb des Bildes anfangen. Um das genau ergründen zu können wäre ein Link auf die betroffene Webseite hilfreich. Dort wären ja auch die Grafiken enthalten.
 
Hallo threadi

Danke für deine Antwort.

Den Schreibfehler bei border habe ich korrigiert.

Also das erste Bild reicht von der Grösse her definitiv über die gesamte Bildschirmbreite. Ich habe die Seite mal bei meinem Freehoster hochgeladen: http://soulxcore.bplaced.net/test/index.html.

Wieso werden die Bilder als "Banner" angezeigt und nicht in ihrer normalen Grösse? Passen sich div-Elemente nicht automatisch dem Inhalt an?



Grüsse
 
Hallo thuemmy

Muss ich den div-Elementen dann die entsprechende Grösse geben bzw. der Bildgrösse anpassen (width und height in Pixeln)?



Grüsse
 
Also so sattelfest bin ich nun auch nicht in CSS. Da müssen Dir dann schon andere weiterhelfen, die das dann sicher gerne tun.
 
Kannst du machen, aber die Bilder sind ja recht groß und es ergäbe sich eine Gesamthöhe von ca. 1900px. Bei wenig Inhalt könnten deine User etwas verwirrt sein, weil gescrollt werden kann. Außerdem kann dein Inhalt mal viel mehr sein als deine Bilder hoch sind und somit ist die Arbei umsonst. Also las den Qutsch sein. Es bringt einfach nichts. Gebe dein Body ein Hintergrundbild und
vergib noch zusätzlich background-size 100%;
 
Ggfs. wäre "background-size: cover;" passender, ich bin mir nicht sicher ob das letztlich das selbe macht wie "100%". Allerdings solltest Du beachten, dass (noch) nicht alle heute verwendeten Browser diese Eigenschaft kennen (IE<=9 z.B.).
 
Kannst du machen, aber die Bilder sind ja recht groß und es ergäbe sich eine Gesamthöhe von ca. 1900px. Bei wenig Inhalt könnten deine User etwas verwirrt sein, weil gescrollt werden kann. Außerdem kann dein Inhalt mal viel mehr sein als deine Bilder hoch sind und somit ist die Arbei umsonst. Also las den Qutsch sein. Es bringt einfach nichts. Gebe dein Body ein Hintergrundbild und
vergib noch zusätzlich background-size 100%;

Dann habe ich ein Hintergrundbild und nicht mehrere und somit nicht den gewünschten Effekt.

Auch wenn ich die Höhe und Breite der div-Elemente auf automatisch setze, passt die Grösse nicht. Sollte das nicht so gehen?

@threadi: Ich schaue mir das gleich mal an.



Grüsse
 
Auch wenn ich die Höhe und Breite der div-Elemente auf automatisch setze, passt die Grösse nicht. Sollte das nicht so gehen?


Nein.

Ein Div hat zwar automatisch eine Breite von 100% aber wenn kein Inhalt darin ist oder eine Höhe angegeben ist hat es auch keine Höhe.

Ein Hintergrundbild ist kein Inhalt.

Gruss
Elroy
 
Gahwd, ich bin zu doof für dieses Zeug.

Bevor ich da^jetzt noch gross rumdiskutiere, mache ich mich mal auf die Suche nach einer Alternative.



Grüsse
 
Zurück
Oben