Mehrere Hintergrundbilder mit HTML/CSS

Blurange · 25.03.2012

Tut mir echt leid, das ich wieder mal was frage, aber dafür ist ein Forum meiner
Meinung nach ja da.
Wie kann ich denn mehrere Hintergrundbilder auf einer Seite einbauen mit HTML/CSS?
Bsp: http://www.webdesigner-profi.de/
Dort gibt es auch mehrere Hintergrundbilder, aber wie mach ich das?

patrick_l · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Es gibt mehre Möglichkeiten. Unter anderem mit z-index, position arbeiten. Passend dazu die Seite mit Divs verschachteln. Das ganze könnte dann so aussehen. den einzelnen "Haupt"-Divs verpasst du dann das Bg-Image. Im Div inside kommt dann der eigentliche Inhalt. So setze ich es in der Regel um.

HTML:

<body>
<div class="wrap">
    <div id="header">
        <div class="inside"></div>
    </div>
    <div id="navigation">
        <div class="inside"></div>
    </div>
    <div id="content">
        <div class="inside"></div>
    </div>
    <div id="footer">
        <div class="inside"></div>
    </div>
</div>
</body>

Code:

/* ---- css ---- */
.inside {width: 960px; margin: 0 auto;}
#bla {width: 100%;}

Grüße Patrick

Blurange · 25.03.2012

Ok hab ich so einigermaßen verstanden, ist halt ein ganzschönes div gewirr.

Code:
/* ---- css ---- */
.inside {width: 960px; margin: 0 auto;}
#bla {width: 100%;}

Was meinst du dann damit?

Und vielen Dank

Ah ok, jetz hab ichs geschnallt :-D
#bla steht für navi, header, footer, content und so, und das hat die volle Seitenbreite also 100% und das inside is ja logisch

patrick_l · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Ja, dafür steht das bla

Mit der Klasse inside kannst du dann erst einmal alles wieder mittig ausrichten. Wenn dann bei den einzelnen etwas geändert werden muss kannst du es ja ohne Probleme mit:

Code:

#bla .inside {bla: blub;}

ansprechen. Hier steht das bla und blub wieder für beliebige Syntax. Was die ganzen Divs angeht - So viel ist es ja gar nicht. Dafür ist es aus meiner Sicht sauber aufgebaut und kann schnell mit CSS über die Klasse formatiert werden. Spart dann im CSS wieder etwas Schreiberei

Grüße Patrick

cebito · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Otto, du weißt aber schon, das ein div im Normalfall (wenn er nicht absolute oder fixed positioniert ist und ich es ihm auch nicht anders sage) schon von Hause aus 100% Breite besitzt

patrick_l · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

cebito schrieb:
Otto, du weißt aber schon, das ein div im Normalfall (wenn er nicht absolute oder fixed positioniert ist und ich es ihm auch nicht anders sage) schon von Hause aus 100% Breite besitzt

Ja, im Normalfall. Weil ich vorher in meinem ersten Post kurz position angesprochen habe hier dann direkt nochmal nen 100% Breite verpasst. Hast aber recht

Blurange · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Alles klar, Danke

Nochmal auf das mittig ausrichten zurück
Zu kommen.
Dh ich muss jeden #bla

nochmals neu zentrieren, wenn ich eine
Seite, welche mittig ist haben möchte, oder?

Das mach ich ja normalerweise so, das ich des inside zentrier und dann das innere davon wiederum dann linksbündig ausricht oder geht das einfacher?

patrick_l · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Nein, dafür ist ja die inside-Klasse gedacht. Wenn du mit

Code:

.inside {width: 960px; margin: 0 auto;}

im CSS das ganze formatierst werden alle inside-Divs mittig ausgerichtet. Wenn du nicht willst das die Seite im Browser mittig ausgerichtet ist musst du nur das margin 0 auto; weglassen. Dann sind alle links ausgerichtet.

Die #bla ,also Header und Co werden dann nur für die unterschiedlichen Hintergründe verwendet. In dem Div inside steckt dann der eigentliche Inhalt. Mit

Code:

#bla {background: url (../images/bg_bla.jpg) repeat-x left}

vergibst du dann nur das Bg-Image und lässt dieses mit repeat entsprechend wiederholen. Der Div passt sich dann so an die Browsergröße an. Im Inside-Div packst du dann nur die eigentlichen Inhalte. Hier kann dann wenn gewünscht auch nochmal ein eigener Hintergrund vergeben werden.

Um bei deinem verlinktes Beispiel zu bleiben. Du brächtest dann nur eine Ecke und verpasst dem Bg-Image ein repeat-x. Hier wäre es dann das Bg-Image für #bla. Ich hoffe das war soweit verständlich.

Ansonsten nochmal fragen.

cebito · 25.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Blurange schrieb:
Das mach ich ja normalerweise so, das ich des inside zentrier und dann das innere davon wiederum dann linksbündig ausricht oder geht das einfacher?

Das zentrieren von Blockelementen per margin:auto; hat nichts mit der Textausrichtung zu tun. Wenn du also nirgendwo gesagt hast text-align:/*woanders*/; dann bleibt der Text links ausgerichtet (standard).

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Ok, das muss ich dann heute einfach mal ausprobieren.
Ich hab es so gelernt, das man das html,body auf center setzt, und dann die container auf left und margin auto setzt, aber wenn man nur margin auto braucht, dann is das ja opti

So habs jetzt mal ausprobiert .
Ich mache zb #header einen blauen hintergrund,
Und das inside dann auf width: 900px und margin auto 0,
Aber er richtet das ganze nicht mittig aus?

PS: wie macht man so eine olle Codebox? :-D

patrick_l · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Du kannst ja den body als wrapper nehmen.

Also body eine fixe Breite verpassen und mit margin 0 auto mittig ausrichten. Sinnvollerweise legt man sich aber um alle Elemente einen Div als Wrapper und richtet dieses aus.

Und das inside dann auf width: 900px und margin auto 0

Du musst es genau anders herum schreiben. Also margin: 0 auto;

Halt im Uhrzeigersinn

oben(0), rechts(auto), unten(0), links(auto). » kurze 0 auto (nicht auto 0)

Und was den Code-Block kannst du mit

Code:

[/ code] erstellen. Den Leerschritt aber bei der schließenden Klammer weglassen ;) Genauso kannst [html] oder [php] Blöcke erstellen ;)

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Das klappt bei mir iwie nicht.
Ich habs jetzt so:

Code:

<div id="header>
<div class="inside">Text Text Text 
</div>
</div>
<style type="text/css">
#header{background-color: blue; width: 100%;} 
.inside {margin: 0 auto; width: 900px;}</style>

Mittig is es aber nicht.

Davi2000 · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Blurange schrieb:
Das klappt bei mir iwie nicht.
Ich habs jetzt so:

Code:

<div id="header> <div class="inside">Text Text Text </div> </div> <style type="text/css"> #header{background-color: blue; width: 100%;} .inside {margin: 0 auto; width: 900px;}</style>

Mittig is es aber nicht.

Müsste aber mittig sein.

Schau dir mal Div #header an.

patrick_l · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Blurange schrieb:
Das klappt bei mir iwie nicht.
Ich habs jetzt so: Mittig is es aber nicht.

Poste bitte mal bitte deinen kompletten Code.

Davi2000 schrieb:
Wie soll es mittig sein, wenn das Element "header" in dem es ja drin ist nicht mittig ist? Es ist mittig, jedoch mittig im Header.

Lies mal bitte dein Beitrag. Es ist mittig aber doch nicht mittig weil es ja mittig ist. :lol:

Wenn alles korrekt aufgebaut ist muss der Header auch nicht mittig sein.

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Code:

<html>
<body>
<div id="header">
 <div class="inside">
 <h1>Background green</h1>
 Text TEXT Text TEXT <br/>
 Text TEXT Text TEXT <br/>
 Text TEXT Text TEXT <br/>
 Text TEXT Text TEXT <br/>
 Text TEXT Text TEXT <br/> 
 </div>
</div>
 
</html>
</body>
<style type="text/css">
body {
margin: 0;
}
#header{
text-align: center;
background-color: green;
width: 100%;
}
 
.inside{
width: 900px;
text-align: left;
margin: 0 auto;
}

</style>

So ist es mittig, wenn ich aber das text-align weglasse, dann ist es nicht mehr mittig.
Das ist bloß mal zum Testen eine Seite, umsetzung einer website so mache ich erst wenn ichs kann :-D

Davi2000 · 26.03.2012

DerOtto schrieb:
Poste bitte mal bitte deinen kompletten Code.

Lies mal bitte dein Beitrag. Es ist mittig aber doch nicht mittig weil es ja mittig ist. :lol: Wenn alles korrekt aufgebaut ist muss der Header auch nicht mittig sein.

Habe ich, deswegen schon ausgebessert. Der Fehler liegt beim Poster im Detail.

Blurange schrieb:

Code:

So ist es mittig, wenn ich aber das text-align weglasse, dann ist es nicht mehr mittig.
Das ist bloß mal zum Testen eine Seite, umsetzung einer website so mache ich erst wenn ichs kann :-D[/QUOTE]

Dein voheriges Bsp war schon richtig, du hast nur ein kleines Detail vergessen.

[COLOR="Red"]Bitte in Zukunft den Bearbeitenbutton (rechts unten im Beitrag) benutzen um Doppelposts zu vermeiden. Danke. Minaya[/COLOR]

patrick_l · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Erst einmal vorweg, Inhalte und die Formatierungen sollten getrennt voneinander bearbeitet werden. Dafür das CSS als eigene Datei auslagern und entsprechend oben im Head-Tag einbinden.

HTML:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Dann solltest du die ganzen Bereiche wie in meinem Beispiel gezeigt. in einen Hauptcontainer (Hauptdiv) packen und diesem die Klasse wrap oder wrapper zuweisen. Anschließend die einzelnen Bereiche erstellen und jeweils ein Div mit der Klasse inside. Wenn du so vorgehst wie von mir beschrieben wird es ohne Probleme laufen. Ich mache dir gerade mal ne kleine Demo fertig damit du es besser nachvollziehen kannst.

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

@Davi2000: der Fehler liegt nicht an dem Vergessenen Anführungszeichen. Hab das vom Handy aus geschrieben und da hab ich ausversehentlich das eine Anführungszeichen vergessen gehabt.
@DerOtto: Für eine kleine Demo wäre ich sehr Dankbar. Ich lagere normalerweise immer meine Stylesheets aus, das ist eine Ausnahme, außerdem seht ihr es ja so auch etwas besser

patrick_l · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

So, ich habe dir mal fix etwas fertig gemacht. Ich hoffe es ist so für dich etwas verständlicher. Einfach den Zip-Ordner herunterladen, entpacken und dir die Index.html sowie die style.css anschauen. Ich habe extra nochmal einzelne Bereiche mit Kommentaren versehen.

-

Grüße Patrick

Davi2000 · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Blurange schrieb:
@Davi2000: der Fehler liegt nicht an dem Vergessenen Anführungszeichen. Hab das vom Handy aus geschrieben und da hab ich ausversehentlich das eine Anführungszeichen vergessen gehabt.

Muss es liegen:

wenn ich folgendes HTML habe:

HTML:

<div id="header">
   <div class="inside">
   </div
</div>

dazu folgende CSS

HTML:

#header{width: 100%; background: blue;}
.inside{width: 900px; margin: auto;}

Dann muss .inside zentriert sein weil #header ja 100% hat. Und genau den gleichen Code hattest du ja gepostet.