Zum Inhalt springen

Hintergrundbild verschiebt sich beim Scrollen trotz position:fixed

Johnny90

Von Johnny90
in Webdesign

 Teilen

Empfohlene Beiträge

Johnny90

Johnny90

Geschrieben
Geschrieben

Einen wunderschönen guten Abend :)

Ich bin grad fast schon am verzweifeln.

Mein Problem ist, dass ich 2 Hintergrundbilder in meiner Webseite haben will, die sich über die ganze Höhe ziehen sollen und beim Scrollen eben fixed sein sollen.

Beim 1. Bild (Wolken als Hintergrundbild im CSS-Element body) ist das ganze auch kein Problem.

Aber bei meiner zweiten Ebene "SecondBackground" funzt das nicht ganz so wie ich will. Wieso wird hier das Bild (die 2 unterschiedlich großen Balken) mitgescrollt und bleibt nicht fix wie die Wolken?

Bitte helft mir bei meinem Problem.

Hier mein Quellcode:

<html>

<head>

<title>Testseite</title>

<style type="text/css">

body

{

  	background-image:url('http://www.bilder-hochladen.net/files/big/icsy-2-c81e.jpg');

  	background-position:center top;

  	background-repeat:no-repeat;

  	background-attachment:fixed;

  	margin:0 0 0 0;

  	height:100%;

}


#completeContent

{

	width:840px;

	z-index: 2;

	position:absolute;

	height:100%;

    left: 50%;

    margin-left: -420px;

	margin-top:0px;

}


#secondBackground

{

	width:840px;

	z-index: 1;

	position:absolute;

	height:100%;

    left: 50%;

    margin-left: -420px;

	background-image:url('http://www.bilder-hochladen.net/files/icsy-1-c4ca.png');

  	background-position:center top;

  	background-repeat:repeat-y;

  	background-attachment:fixed;

}


</style> 

</head>


<body>

	<div id="completeContent">

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	<p>Testsatz.</p>

	</div>

	<div id="secondBackground"></div>	

</body>

</html>

Viele Grüße

Johnny

Link zu diesem Kommentar
Auf anderen Seiten teilen
Johnny90

Johnny90

Geschrieben
  • Autor
Geschrieben

Hi,

Danke für die Antwort.

Das hatte ich bereits probiert. Hab das 2. Bild mal auf fixe Höhen : 600, 800, 1024, 1080 und no-repeat gesetzt. aber das klappt trotzdem nicht :(

Hab auch mal die Ebene, in der das Bild sein soll (SecondBackground) auf position:fixed anstatt absolute geändert. Ebenfalls keine Veränderung.

Vielleicht noch ne andere Idee? :)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Johnny90

Johnny90

Geschrieben
  • Autor
Geschrieben

oh verdammt.

tut mir leid, das mit der div auf position: fixed anstatt absolute setzen hätte schon gereicht.

wenn man das background-attachment ändert bringt das rein gar nichts, da es ja nur fixed bleiben würde, wenn innerhalb dieser Ebene gescrollt werden würde.

Vielen Dank!!! :)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...