Antworten auf deine Fragen:
Neues Thema erstellen

Mehrere Hintergrundbilder mit HTML/CSS

Blurange

Nicht mehr ganz neu hier

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

Hat es drauf

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
 
Zuletzt bearbeitet:

Blurange

Nicht mehr ganz neu hier

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 ;)
 
Zuletzt bearbeitet von einem Moderator:

patrick_l

Hat es drauf

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
 
Zuletzt bearbeitet:

cebito

undefined

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

Hat es drauf

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 ;)

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 :D
 

Blurange

Nicht mehr ganz neu hier

AW: Mehrere Hintergrundbilder mit HTML/CSS

Alles klar, Danke ;)

Nochmal auf das mittig ausrichten zurück
Zu kommen.
Dh ich muss jeden #bla :D 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?
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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

undefined

AW: Mehrere Hintergrundbilder mit HTML/CSS

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

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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 ;)
 
Zuletzt bearbeitet:

Blurange

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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.

Müsste aber mittig sein.

Schau dir mal Div #header an.
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: Mehrere Hintergrundbilder mit HTML/CSS

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

Poste bitte mal bitte deinen kompletten Code.

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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.

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]
 
Zuletzt bearbeitet von einem Moderator:

patrick_l

Hat es drauf

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

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

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.

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.481
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben