Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Themen

Hintergrundbild verschiebt sich beim Scrollen trotz position:fixed

Gast Johnny90
Gast Johnny90
in Webdesign

Empfohlene Antworten

Veröffentlicht

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

Hi,

probier vielleicht mal folgendes, ändere bei dem zweiten Hintergrund background-repeat in no-repeat. Evtl. könnte es ja daran liegen.

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

Oder mal die position auf static setzen.

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

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.