HTML und CSS Hintergrund

isotr0nic · 08.09.2011

Hallo ,

Ich habe eine Frage die mich schon seit laaaaangem stört :lol:

Und zwar baue ich gerade eine Seite wo ich links und rechts einen fixen Hintergrund setzen möchte und der rest der Seite soll einen Hintergrund bis nach unten haben.

Das alles sollte sich nicht verschieben egal welche Bildschirmauflösung man besitzt.

Da ich kein HTML oder CSS Profi bin liegen hier nun meine Grenzen und mehr als das ich 3 Spalten aufgezogen hab ( was auch funktioniert hat ) hab ich nicht geschafft. Problem ist halt sobald ich die Auflösung auf 1024 runterschraube verschiebt sich BG LEFT und BG RIGHT.

Hab hier eine kleine Grafik gemacht damit man das problem etwas sieht da ich nicht sogut in erklären bin

Link: http://www.abload.de/img/fragetu5s.jpg

Vielleicht könnte mir jemand nen rat oder sogar einen Code geben das wäre echt nett von euch...

Danke erstmals für eure mühen

Lg tom

Hiobifi · 08.09.2011

AW: HTML und CSS Hintergrund

Also wenn das ein festes layout is, dann mach doch nur eine Spalte in der Mitte. und dann als Hintergrund zentrierst du das Bild. Dann brauchst du nur 2 Bilder:
1. Das mit dem Bild das du dann einfach als Hintergrund hast und das trotzdem so aussieht, als ob es deinen Inhalt einfasst (in ein absolut positionierten div-Bereich, den du über den body legst)

2. Die Textur die du ins unendliche wiederholen lässt. (als hintergrund für den Body)

Hoffe du weißt wie ich das mein.

Greetz!
Hiobifi

isotr0nic · 09.09.2011

AW: HTML und CSS Hintergrund

Hey ,

hmm also wenn ich das als kompletten hintergrund mache ist dieses bild 700 kb groß und ladet unendlich ... sofern ich eine Spalte erstelle weiß ich auch nicht wie breit ich das genau einstellen soll denn ich habe eine Bildschirmauflösung von 1920 x 1080 und möchte das auch für die 1024 user einstellen. Die Textur versteh ich schon als Hintergrund im Body die auch bei mir funktioniert hm

kenn mich zuwenig aus xD

trotztem danke lg tom

Hiobifi · 09.09.2011

AW: HTML und CSS Hintergrund

Hi,
also wenn es ein festes Layout werden SOLL und du das von Anfang an vor hattest, dann empfiehlt es sich das Template auf 1000px brete zu setzen. Das ist dann auf den meisten Bildschirmen darstellbar. Auch zum Beispiel auf Netbooks.
Wenn du es statisch haben möchtest, musst du halt in Kauf nehmen, dass von deinem Hintergrundbild immer weniger bis garnichts zu sehehn ist.

Und due kannst dein Hintergrundbild kleiner machen, wenn du zb 1000 pixel in der Mitte Transparent lässt und die Body-Textur weg lässt und auch durch transparent Bereiche ersetzt

Greetz!
Hiobifi

Gegenstrom · 09.09.2011

AW: HTML und CSS Hintergrund

dein eigentlicher bg ist dieses tapetenmuster, dort den teil rausnehmen der das muster bildet, sprich 40x50, oder wie dein muster aufgebaut ist, welches du in den body legen kannst.

<-- sollte ungefähr dein muster sein
das ganze wiederholt sich dann sowohl auf der x als auch y-achse, damit ist deine grafik nur noch um de 25kb(sogar kleiner mit gewissen einstellungen) groß und du hast einen teil schonmal weg
sprich

HTML:

body {
margin:0;
padding:0;
background-image:url(images/bg.jpg);
background-repeat:repeat; <-- in beide richtungen wiederholen
background-position:left top;
}

für deine spalte bg 1 und bg2, leg dir eine spereate grafik an, png/gif, je nachdem, leg dir ne fest größe zu, speicher dir die beiden grafiken ab, mit transparenz, sollten um de 100kb ham, je nachdem wie du die einstellungen vornimmst, kanns auch weniger werden, weit aus weniger

setz dir einen layout-div, der sollte dann die breite deines contents haben, sagen wir einfach 700px,
in diesen packst zwei weitere divs, und zwar bg1 und bg2
sprich

HTML:

<body>
   <div id="layout">
       <div id="bg1"></div>
       <div id="bg2"></div>
   </div>
</body>

und zur css

HTML:

#layout{
position:relative; <-- wichtig für die beiden bgs!
margin:auto; <--mittig zentrieren
width:700px; <--erdachter wert
background-color:#fff;
}
#bg1{
position:absolute;
top:0px;
left:- die "breite deiner ersten grafik"px; <-- wobei ich mir da nich so sicher bin*
width:"breite deiner ersten grafik"px;
height:"höhe deiner ersten grafik"px;
background-image:url(images/bg1.png);
background-repeat:no-repeat;
background-position:top left;
}
#bg2{
position:absolute;
top:0px;
left:"700+breite deiner zweiten grafik"px; <-- wobei ich mir da nich ganz sicher bin*
width:"breite deiner zweiten grafik"px;
height:"höhe deiner zweiten grafik"px;
background-image:url(images/bg2.png);
background-repeat:no-repeat;
background-position:top left;
}

bei * rumprobieren ob meine angaben wirklich klappen, und ohne die "" natürlich
das ganze sollte funktionieren

habs nich ausprobiert, aber es sollte klappen, warum sollte variante 1 klappen?
weil du ein div hast der relative positioniert ist, und in diesem befinden sich zwei divs die absolute positioniert sind, diese beiden ordnen sich dem relative-div unter und verschieben sich damit auch gleichzeitig, wenn das fenster verkleinert wird, weil der relative positionierte div sich durch die automatische zentrierung mit verschiebt

eine weitere möglichkeit wäre, wieder das tapetenmuster als background-image, dieses mal aber in den html-tag
und die bg1 und bg2 zu einer grafik zusammenfassen mit der lücke des contents, als png/gif, und diese dann in den body packen mit der position: top center;
sollte eigentlich auch funktionieren

angaben ohne gewähr, aber das wäre meine rangehensweise an dein problem, gibt sicher noch bessere möglichkeiten, aber vorerst würde mir persönlich nichts besseres einfallen

gruß Gegenstrom