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

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? :)

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!!! :)

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 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...