Du bist nicht angemeldet. [Anmelden]
Übersicht der Foren        Kalender     Hilfe   Forumsknigge
Knuddels.de-Forum » Das Forum » Archive » Hilfe & Fragen zur Knuddels-HP »

Doppelter Background
Optionen
Thema bewerten
Doppelter Background - #1793404 - 02.07.2009, 17:26:11
Scnappi
Nicht registriert


Hey,

ich habe jetzt lange rumprobiert und es nicht hinbekommen... Erstmal kurz was ich gerne machen würde:

[img]http://iceflash.de/fs/hpf1.jpg[/img]

Als Hintergrund (im body) habe ich diese graue Struktur. In der Mitte hätte ich gerne das Blatt Papier. Wenn man hinunterscrollt, soll der Hintergrund fixiert genau so bleiben, wie er jetzt auf dem Screen ist.

[img]http://iceflash.de/fs/hpf2.jpg[/img]

Allerdings funktioniert das wie man hier auf dem zweiten Screen sieht nicht so richtig.

Code:
body {
    background: url('bg2.jpg') repeat;
}

#bgLayer {
    background: url('paper.png') no-repeat center top;
    background-attachment: fixed;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -444px;
    z-index: -1;
    width: 888px;
    height: 100%;
}


Html:
<div id="bgLayer"></div>

<div id="content">
  <h1>Header One</h1>
  <p>Lorem ipsum usw. [...]</p>
</div>


Edit:
Zuerst hatte ich es lokal auf dem PC, aber ein Link ist vermutlich doch besser. Zu finden ist das ganze hier.

Wäre toll wenn mir jemand zeigen könnte, wie man das hinkriegt. :-O

Kroko.


Bearbeitet von Scnappi (02.07.2009, 19:13:05)
Bearbeitungsgrund: Falsche ID im CSS korrigiert
[zum Seitenanfang]  
Re: Doppelter Background [Re: ] - #1793425 - 02.07.2009, 17:59:09
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Antwort auf: Scnappi
Code:
body {
    background: url('bg2.jpg') repeat;
}

#wrap {
    background: url('paper.png') no-repeat center top;
    background-attachment: fixed;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -444px;
    z-index: -1;
    width: 888px;
    height: 100%;
}

Im Firefox funktioniert das ganze mit position:fixed. Dann bleibt das Paper stehen. Allerdings macht der IE dann murks. Ich frag x3ro mal, ob er ne Idee hat (mit JavaScript oder ähnlichem).
[zum Seitenanfang]  
Re: Doppelter Background [Re: KnuddelWelli] - #1793667 - 02.07.2009, 21:39:45
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Ich hab nicht so die Lust auf Erklaerungen aber du bist ja ein helles Koepfchen.
Folgendes sollte gewuenschtes Resultat bringen
Html:
<style type="text/css"> 
body {
   background: url('sc_khp/bg2.jpg') repeat;
}
   #blindLayer {
      top: 0;
      height: 290px;
      width: 888px;
      position: absolute;
      background: transparent url(paper.png) no-repeat  center top;
      z-index: -1;
   }
   #bgLayer {
      background: url('sc_khp/paper.png') no-repeat fixed center top;
      position: absolute ;
      top: 0; left: 50%;
      width: 888px; height: 100%;
   }
      #content { padding: 0pt 50px 86px 100px; }
</style>
<!--[if IE]>
<style type="text/css" media="screen">
   #blindlayer{
      height: 900px;
      background-attachment: fixed;
   }
   #bgLayer {
      background: none;
   }
   #content {
      width: 888px;
   }
</style>
<![endif]-->
<div id="blindlayer"></div>
<div id="bgLayer">
   <div id="content">
      <h1>Heading One</h1>
      <p>Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. [...]
      <h2>Heading Two</h2>
      <p>Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
         Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. [...]
   </div>
</div>

[zum Seitenanfang]  
Re: Doppelter Background [Re: huendchen] - #1793693 - 02.07.2009, 21:55:09
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Beim bgLayer haben sich Positionierung und Ausrichtung noch mit eingeschlichen, die gehoeren natuerlich raus.
Antwort auf: knuddelwelli
Allerdings macht der IE dann murks. Ich frag x3ro mal, ob er ne Idee hat (mit JavaScript oder ähnlichem).

Bezieht sich nur auf den IE6 und bei obskuren Verschachtelungen z.T. auch auf den IE7


Bearbeitet von huendchen (02.07.2009, 21:59:35)
[zum Seitenanfang]  
Re: Doppelter Background [Re: huendchen] - #1793779 - 02.07.2009, 23:54:01
x3ro
Nicht registriert


Hi,
ich fände huendchens Lösung eigentlich ganz gut... es gibt nur ein kleines Problem im FF: (im IE wird bei mir alles korrekt angezeigt)

Screenshot:
[img]http://i42.tinypic.com/kc05m9.jpg[/img]

Ich hab mir selbst auch so meine Gedanken gemacht und habe letzendlich ein JavaScript geschrieben, dass um die KOMPLETTE Website einen Div legt, der als Hintergrund das Paper hat:
Warnung! Spoiler!
Html:
<style type="text/css">
/* <![CDATA[ */

body {
	background-image: url('http://i44.tinypic.com/r2u6bo.jpg');
	background-attachment: fixed;  /* diese Zeile löschen wenn sich der Seitenhintergrund mit bewegen soll */
}

#paper {
	background: url('http://i40.tinypic.com/b503zp.jpg') no-repeat center top;
	background-attachment: fixed;
}

/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */

window.onload = function() {
	body = document.getElementsByTagName('body')[0];
	body.innerHTML = '<div id="paper">' + body.innerHTML + '</div>';
}

paper

/* ]]> */
</script>

<h1>Heading One</h1>
<p>Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt.</p>
<h2>Heading Two</h2>
<p>Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text, mit dem man testen kann, wie das Layout aussieht, wenn man weiter runterscrollt. 
   Ich bin nur ein Text</p>

Damit sollte es in jedem Browser funktionieren der JavaScript unterstützt. (Man kann also sagen in allen ;-) )

Eine kleine Vorschau?


^x3ro
[zum Seitenanfang]  
Re: Doppelter Background [Re: ] - #1793839 - 03.07.2009, 01:43:43
Scnappi
Nicht registriert


Hallo,

erstmal danke euch Dreien für die Hilfe. Ich hab's jetzt im Firefox, Opera und Safari hinbekommen. Der Internet Explorer will aber immernoch nicht so richtig. Der setzt das Papier jetzt zwei mal ein.

Zur Homepage...

Kroko.


Bearbeitet von Scnappi (03.07.2009, 02:20:29)
Bearbeitungsgrund: Erster Bug gefixt... neuer aufgetreten und Post entsprechend geändert.
[zum Seitenanfang]  
Re: Doppelter Background [Re: ] - #1794221 - 03.07.2009, 17:06:47
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Der sicherlich einfachste Weg – jetzt nach dem ich es gesehen hab weiss ich dass auch der kdfooter eingeschlossen werden soll – waere es dem html- & body-Tag die jeweilligen Hintergruende mitzugeben. Das wuerde sogar im IE funktionieren, wenn er sich, hier in Knuddels, nicht im Quirks befinden wuerde. Dafuer dann einfach im CC eine Hintergrundfarbe mitgeben.

Warnung! Spoiler!
Html:
<style type="text/css">
   html { background: url(bgtexture.jpg) scroll repeat; }
   body { background: url(papertexture.png) fixed repeat-y center top;}
</style>
<!--[if IE]><style>body{background-color:#daa520;}</style><![endif]-->


Dies waer jetzt – zumindest fuer mich – ein einfacher Weg um Herr ueber den IE zu werden.
[zum Seitenanfang]  
Re: Doppelter Background [Re: huendchen] - #1794259 - 03.07.2009, 18:00:24
Scnappi
Nicht registriert


Uff, so simpel... Der IE hat das mit dem html-background nicht mitgemacht, aber das mit der Farbe ist jetzt auch vollkommen ok, weil es ja dann ungefährt so aussieht, wie in den anderen Browsern.

Damit bin ich jetzt zufrieden. Danke! :-]

[zum Seitenanfang]  


Markiere alles als gelesen
Forums-Kontakt · Knuddels - Chat / Chatroom · [zum Seitenanfang]