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

2 hintergrundbilder wiederholen lassen?!

A

avalon

Neues Mitglied
hi leute...

folgendes habe ich vor:

ich möchte ein hintergrundbild per repeat-x vertikal sich unendlich wiederholen lassen und eine anderes mit repeat-y horizontal.
sozusagen 2 verschiedene bilder eines horizontal und das andere vertikal ausrichten und wiederholen lassen.

wie kann man dies umsetzen? 2 hinergrundbilder kann man ja nicht anlegen. gibts da einen besonderen kniff oder wie macht man das am besten?

gruss avalon
 
hey danke für die schnelle antwort.

aber wie beschreibt man das dann?
background image stimmt ja dann nicht mehr?!
 
Natürlich stimmt das dann noch. Hintergrundbilder werden immer mit background-image eingebunden.

Zusätzlich gibst Du den Elementen z-index. Da hast Du sicher schon danach gegooglet, um zu sehen, wie man das anwendet, ja?
Wichtig ist nur zu wissen, dass z-index aber nur in Verbindung mit absoluter oder relativer Positionierung funktioniert.
 
ok ich habs hinbekommen ^^

ich bin nicht so sehr mit css bewandert aber solangsam komm ich dahinter ^^

Code: 
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    background-image: url(Bilder/seite.jpg);
    background-repeat: repeat-x;
    background-color: #B5BDC8;
}
#bg {
background-image: url(bilder/unten.jpg);
background-repeat: repeat-y;
background-position:center;
height:100%;
}
#inhalt {
}
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="bg">
      <div align="center"><img src="Bilder/index.jpg" width="992" height="570"></div>
    </div>
  <div id="inhalt"></div>
</div>
</body>
</html>

danke für deine bemühungen :)
 
Naja, CSS ist nicht sooo schwer, wenn man HTML richtig kann. Du wirst das schon schaffen :-)

Aber wenn das Dein gesamter Code ist, dann lass mich Dir ein paar Tipps mit auf den Weg geben:
1. Der Doctype fehlt. Mit Hilfe des Doctypes sollen alle Browser in den Standards Mode versetzt werden, sonst gibt es Darstellungsunterschiede.
2. Du solltest keine old-fashioned HTML-Attribute mehr verwenden, die für Layout/Design zuständig sind (leftmargin, align, etc). Mach das alles mit CSS. Man trennt immer Inhalt strikt von Layout. Das macht vieles einfacher und übersichtlicher.
3. Schreibe CSS komplett in ein externes Stylesheet. Das verkürzt die Ladezeiten (weil das Stylesheet nur einmal geladen und dann im Cache verstaut wird) und macht das Astauschen eines Kompletten Designs einfacher.
4. Das alt-Attribut in Deinem Image fehlt. Wenn keine Bilder dargestellt werden, sieht man nichts.
5. Achte immer auf die Semantik. HTML gibt dem Inhalt eine logische Bedeutung. Nur so können Clients, die nicht zum Visualisieren da sind (Vorlesebrowser, Suchmaschinen) Deinen Inhalt verstehen.
6. Koche keine div-Suppe. div dient lediglich zum Gruppieren mehrerer Inhalte.
 
ja ich habe bisher die seiten immer mal so und mal so aufgebaut.. hauptsache die seite hat nachher irgendwie gestanden ^^

mittlerweile denke ich auch so darüber, wie du eben aufgezählt hast...
einfach besser strukturieren etc.

ich versuche mir mal übers wochenende css um einiges besser einzuverleiben.

danke für deine tipps :)
 
Hallo avalon,

wenn ich richtig sehe, was Du vorhast, dann geht das ohne das zusätzliche div
und ohne z-index:

Code: 
html {
 background-image:url(../img/seite.gif);
 background-repeat:repeat-x;
}
body {
 background-image:url(../img/unten.gif);
 background-repeat:repeat-y;
}
Grüße
Bernhard
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben