Backstretch unter Typo3

Zuerst müssen die js Dateien im Setup des Seitentemplates eingebunden werden. Das jquery.backstretch.min.js finden Sie hier

page.includeJS.file1 = fileadmin/ihrPfad/jquery.custom.js
page.includeJS.file2 = fileadmin/ihrPfad/jquery.backstretch.min.js

 


Nun wird folgende Anweisung benötigt.

<script type="text/javascript">
        $.backstretch([
          "fileadmin/ihrPfad/hintergrund.jpg",
          "fileadmin/ihrPfad/hintergrund2.jpg",
          "fileadmin/ihrPfad/hintergrund3.jpg",
          "fileadmin/ihrPfad/hintergrund4.jpg",
        ],
        {duration: 5000, fade: 2000}
        );
</script>



Diese am Besten in das Seitenlayout integrieren. Es muss im BODY-Tag aufscheinen.

<body>
    <script type="text/javascript">
        $.backstretch([
          "fileadmin/ihrPfad/hintergrund.jpg",
          "fileadmin/ihrPfad/hintergrund2.jpg",
          "fileadmin/ihrPfad/hintergrund3.jpg",
          "fileadmin/ihrPfad/hintergrund4.jpg",
        ],
        {duration: 5000, fade: 2000}
        );
    </script>

    <div id="container_header_bg">
        <div id="container_header_top">
            <f:render partial="header_top" arguments="{_all}" />
        </div><!-- container_header_top -->
        <div id="header_mobile">....


In der CSS-Datei beim BODY-Tag den Eintrag background: löschen oder auskommentieren. Das Script erstellt einen eigenen Eintrag.

body {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-size: 1em;
    letter-spacing: 1px;
    /*     background-image: url("hintergrund.jpg"); */
}

 

 

 

Zuerst müssen die js Dateien im Setup des...

Weiterlesen

Um ein Eingabefeld auf einer bestimmten Stelle der...

Weiterlesen

Eine Anleitung und die dazugehörigen Dateien...

Weiterlesen

Einige Seiten um Farbcodes und Farbschemas zu...

Weiterlesen

Mit dem backstretch script lässt sich eine simple...

Weiterlesen

 

Ein einfaches horizontales Menü in Typo3 kann...

Weiterlesen

Für die Suchmaschinenoptimierung nicht...

Weiterlesen

Einer meiner Favoriten der CSS-Eigenschaften ist...

Weiterlesen

Im Allgemeinen kann ein META-Tag für den...

Weiterlesen

Die robots.txt dient dazu, um das Suchverhalten...

Weiterlesen