Content soll über stehendes Bild scrollen

[m-werk]

Hallo,

folgendes möchte ich erreichen: Wenn ein User die Startseite aufruft, dann soll das Bild Full Size am Bildschirm erscheinen (background-size: cover). Sollte kein Problem sein, aber wen der User scrollt, soll der Content hochsrollen, und über das Bild gehen. So wie in diesem Beispiel: https://www.bootply.com/108614

Das heißt, das Bild soll sich einfach dem Browserfenster anpassen. In diesem Beispiel wird dann ganz normal nach oben gescrollt. Was ich aber schön finden würde, wäre, wenn das Bild stehen bleibt, und der weiße Content darüber scrollt.

Ich hab schon nach sticky header gesucht, auch schon eingebaut, aber es hat nicht funktioniert.

Ich hab zu Testzwecken WordPress mal installiert und hier funktioniert es auch. Ich hab nur nicht herausgefunden, wie.
Link: http://www.daseberhart.at/wp (Das ist nur ein TEST-Link)

Kann mir hier jemand helfen? Danke

[planepix]

Hallo Andi,

wenn du im CSS für das Bild noch ergänzt:

background-attachment:fixed;

sollte das klappen

[m-werk]

Ja, aber der Conten-Bereich (container) soll am Unteren Bildschirmrand beginnen.

[m-werk]

Ich hab es jetzt fast geschaft. Aber den Container am unteren Bildschirmrand zu platzieren bzw. von dort aus zu starten, das hab ich noch nicht!

[m-werk]

So, den 1. Teil hab ich geschafft. Ich hab hierfür einen zusätlichen Layoutbereich unter dem Header geschaffen.

Jetzt hab ich das Problem, dass der 1. DIV-Container in der Seitenstruktur keine 100% höhe hat. Ich hab hier schon einiges gelesen, aber bis dato hab ich es bei mir noch nicht hinbekommen.

vielleicht kann es sich einer mal ansehen. http://test.daseberhart.at/home.html

Es handelt sich NUR um diese eine Seite. Dafür hab ich auch ein eigenes Layout genommen. Ich möchte nur, dass der DIV "#home_startseite" 100% höhe hat.

[derRenner]

So, den 1. Teil hab ich geschafft. Ich hab hierfür einen zusätlichen Layoutbereich unter dem Header geschaffen.

Jetzt hab ich das Problem, dass der 1. DIV-Container in der Seitenstruktur keine 100% höhe hat. Ich hab hier schon einiges gelesen, aber bis dato hab ich es bei mir noch nicht hinbekommen.

vielleicht kann es sich einer mal ansehen. http://test.daseberhart.at/home.html

Es handelt sich NUR um diese eine Seite. Dafür hab ich auch ein eigenes Layout genommen. Ich möchte nur, dass der DIV "#home_startseite" 100% höhe hat.

hallo
Ich glaube das brauchst du alles nicht ...
Mach dein custom Bereich mal weg und setze die dafür eingetragene CSS in den #wrapper. Mit dem Zusatz wie ihn @planepix bereits vorgeschlagen hat.
ggf. kannst du den #wrapper noch mit eine body class ergänzen damit dir diese CSS Regel nur in der Startseite gezogen wird

Gesendet von meinem LG-D802 mit Tapatalk

[m-werk]

Ok, ich werde es mal versuchen.

Was meinst du damit

ggf. kannst du den #wrapper noch mit eine body class ergänzen damit dir diese CSS Regel nur in der Startseite gezogen wird

Beideutet das, dass ich hierfür gar kein eigenes Layout hierfür benötige? Wie kann ich dann diese CSS-Regel nur auf den Menüpunkt HOME zeigen lassen?

[derRenner]

Ok, ich werde es mal versuchen.

Was meinst du damit


Beideutet das, dass ich hierfür gar kein eigenes Layout hierfür benötige? Wie kann ich dann diese CSS-Regel nur auf den Menüpunkt HOME zeigen lassen?

Ja korrekt. Aktuell hat dein body eine class .home_menu und diese kannst ganz gezielt ansprechen ...
body.home_menu #wrapper {}

Gesendet von meinem LG-D802 mit Tapatalk

[m-werk]

PERFEKT. Ich hab es jetzt so gelöst. DANKE nochmals.

Achja, mein Problem mit dem 1. DIV auf der Startseite hab ich auch jetzt gelöst.

Ich musste nur im Layoutbereich einen jQuery-Code einfügen.

<script>
	
	function sizeContent() {
    	var newHeight = $("html").height() + "px";
    	$(".home_startbild").css("min-height", newHeight); 
	}

	
	$(document).ready(function () {
		sizeContent();
		$(window).resize(sizeContent);
	});

</script>

Jetzt sollte hoffentlich dem Rest nichts mehr im Wege stehen.

DANKE NOCHMALS

[m-werk]

Hallo Leute,

eines hätte ich diesbezüglich noch. Wie kann ich es nun anstellen, dass anstelle des Hintergrundbildes in diesem einem DIV eine Slideshow mit mehreren Bildern stattfindet?

Das ist jetzt mal mein CSS-Code:

body.home_menu #wrapper {
    width:100%;
    height:100%;
    position:absolute;
    text-align:center;
    background-image:url("files/startbild_gross/startbild1.png");
    height:calc(100% - 1px);
    background-size: cover;
    background-attachment: fixed;
}

Ich hab mir den Rocksolid Slider installiert und möchte anstelle des Background-images hier nun diesen Einbinden.

Kann mir jemand sagen, wie ich das am besten anstelle?

[MacKP]

Das ist dann eine komplett andere Geschichte.
Den Slider kannst du nicht als Background-Image einbinden. Da dann einfach den Slider wie normal einbinden und den dann per Position und z-index so verschieben, dass es passt.
Ist aber zum Teil bei sowas etwas fummelige Arbeit.

Viele Grüße

[mlweb]

Im Prinzip sollte man bevor man anfängt zu Coden, wissen was eigentlich das Ziel ist. Wozu die ganze Mühe auch der Community, wenn man im Endeffekt ein anderes Ziel hat als ursprünglich kommuniziert.
Ich habe mal einen echten Hintergrundslider aufgebaut. Funktioniert aber nur für eine im Vorfeld festgelegte Anzahl von Bildern (hardcodet) und ist auch für die Pflege durch den Redakteur eher nicht geeignet. Ist in diesem Fall aber auch nicht notwendig. http://www.reinerzau.de/