Anleitung: WebsoziCMS-Layout „spd2012“ mit Hintergrundbild versehen

Wie man den Header im WebsoziCMS-Layout „spd2012“ vergrößert, habe ich in einem vorherigen Beitrag erläutert.

Jetzt wenden wir uns dem Hintergrund zu; die Idee ist vom Webmaster von petra-crone.de, die CSS-Änderungen sind von mir.

So soll es aussehen:

daniel-born.de mit Hintergrund

Und so geht es:

Zuerst ein beliebiges Bild mit der Download-Funktion des WebsoziCMS hochladen – es sollte allerdings mindestens die Maße 2000×2000 Pixel haben, damit es auch auf großen Bildschirmen ordentlich aussieht. Die URL zum Bild kopieren.

Im CSS-Bereich im Adminmenü unter „Metatags“ werden folgende CSS-Ergänzungen zusätzlich eingefügt:

<style type="text/css" media="screen, projection">
<!--
body {
background: url('http://HIER-MUSS-DIE-KOMPLETTE-URL-STEHEN.DE/PFAD-ZUR-DATEI.JPG') no-repeat;
background-position: top center;
background-attachment:fixed;
}
#bread_and_crump {
display: none;
}
#navigation {
margin-top: 0px;
}
-->
</style>

Statt http://HIER-MUSS-DIE-KOMPLETTE-URL-STEHEN.DE/PFAD-ZUR-DATEI.JPG müsst ihr die URL zu eurem Bild einfügen – bei daniel-born.de ist das bspw. diese URL: http://spdnet.sozi.info/bawue/KA-Land/dborn/dl/hintergrundbild_sonnenblume.jpg

Achtung: Bitte achtet darauf, dass das Hintergrundbild keineswegs größer als 1 MB ist; eigentlich ist das schon zu groß, 200-400 KB sollten völlig ausreichend sein. (Je größer das Bild, desto langsamer der Seitenaufbau – insbesondere für Smartphone-NutzerInnen ist das relevant.)

Veröffentlicht von

Christian Soeder

Freier Mitarbeiter Internet SPD Baden-Württemberg

6 Gedanken zu „Anleitung: WebsoziCMS-Layout „spd2012“ mit Hintergrundbild versehen“

  1. Hi Christian,

    superklasse, dass man das verändern kann.
    Wollte das gerade bei unserer Juso-Homepage machen, doch bei Metatags –> HTML- Vorlagen: JS – CSS bei dem Kasten, möchte ich die CSS-Ergänzung von dir einfügen (unter das was schon drinsteht)…doch dann kommt die Meldung:
    ,,Es wurden Fehler gefunden.

    Das muss geändert werden:

    Das Element darf keinen Text enthalten. (Zeile 23)

    Die Daten wurden nicht gespeichert.“

    Kannst du mir helfen?

    Gruß und Danke :)

  2. Super danke! Jetzt hats geklappt…jetzt muss ich nur noch en gescheites Bild suchen :)

  3. wunderbare Anleitung! Hab das Skript kopiert und angewendet und funktioniert super! Wie immer vielen Dank und weiter so!

    Beste Grüße

Kommentare sind geschlossen.