Hintergrundbilder, transparente Farben, header-Bereich
  • regezo April 2011
    Posts: 1

    In Kombination mit Hintergrundbildern ergeben sich neue Möglichkeiten. Durch die Option einer transparenten Farbe könnte die eine oder andere undurchsichtige Farbe ersetzt werden, was dem Effekt des Hintergrundbildes in Bezug auf Ausdruck der Webseite u.U. zu Gute käme.


    Frage 1.: Wie kann ich z.B. bei Typ new wave, helles grau die Farbwelt in Hinblick auf die Transparenz verändern?  Wie ist die ID der Farben ; wo und wie kann man diese verändern.


    _


    Viele Hintergrundbilder sind im Moment noch gekachelt.


    Frage 2.: Wie kann ich ein Hintergrundbild ohne Kachelung bekommen oder ein Eigenes ohne Kachelung hochladen? Wo und wie stelle ich das ein?


    _


    Der header Bereich z.B. bei Typ new wave ist für Bilder vorgesehen. Auch nach mehreren Versuchen über das Experten-tool konnte ich eine slide-show in diesem Bereich nicht einbinden; Ich kam immer ÜBER dem header heraus.


    Frage 3.: Wie binde ich hier ein java-script ein?


  • Herr Krings (Admin) April 2011
    Posts: 108

    Hallo regezo,

    uff, da hast du dir ja ganz schön was vorgenommen.
    Wenn ich deine Fragen sehe, gehe ich mal davon aus, dass du Anfänger im Programmieren bist.
    Ich fange mal mit Frage 1 an
    Prinzipielles: nicht Farben haben eine ID, sondern die einzelnen Elemente aus denen die Seite aufgebaut ist.
    Wenn du irgendwo eine Transparenz einfügen möchtest benötigst du die ID des Elementes, dem du die Transparenz hinzufügen möchtest.
    Wichtig bei der Transparenz zu wissen, ist, dass alle Unterelemente dieses Elementes ebenfalls transparent werden. Das bedeutet, dass auch die Schrift (die technisch gesehen ein Unterelement ist) transparent wird. Das gleiche gilt für Bilder, die in diesem Element liegen !

    Wenn ich mir das Design so ansehe, musst du dem Element mit der ID "ibk_main_container" die Transparenz hinzufügen, damit der Hintergrund im Textbereich durchscheint.
    Das bedeutet nach obiger Regel aber auch, dass die Navigation die Transparenz annimmt !

    Das ganze fügst du so in den Experten-Tools ein:
    <style type="text/css">
    #ibk_main_container {
        filter:alpha(opacity=90); /* IE */
        opacity:0.9; /* allgemein */
        -moz-opacity:0.9; /* Mozilla */
        -khtml-opacity:0.9; /* KTHML */
        -opera-opacity:0.9; /* Opera */
    }
    </style>
    Die Werte 0.9 bzw 90 kannst du n zwischen 0 und 1 bzw 0 und 100 (für den IE) von komplette durchsichtig bis undurchsichtig anpassen.

    Nun zum Frage 2, den Hintergrund, den du nicht mehr gekachelt möchtest. Da brauchst du diesen Code:
    <style type="text/css">
    body {
      background-repeat: no-repeat;
    }
    </style>

    Ich denke aber, du bekommst dann Probleme damit, dass dein Hintergrundbild genau hinter deinem Text sitzt, wenn du das Design mittig ausgerichtet hast

    mit folgendem Code kannst du das Hintergrundbild ausrichten

    <style type="text/css">

    body {

      background-position: 10px 20px;

    }

    </style>
    Zu den Werten, die du hier einsetzen kannst, findest du Informationen auf dieser Seite:
    http://www.css4you.de/background-position.html

    Eine andere Möglichkeit ist es aber auch ein Bild mit "riesigen Dimensionen" hochzuladen, also z.B. 5000 x 5000 px. Dann findet das Kacheln in einem Bereich statt, in dem man es normalerweise nicht sieht. Da aber bei einem großen Bild die Dateigröße wächst, kann es sein, dass due hier an grenzen stößt.

    Hochladen kannst du dein Hintergrundbild ganz normal in der Designkonfiguration.

    Frage 3: Das ist nichts, was man so eben mal nebenbei erklärt, da kannst du locker einige Zeit dran sitzen. Und ohne Ahnung in Javascript kann das sehr schnell in die Hose gehen.

    Mein Tip: bau ein sog. animiertes gif und lade das hoch. Das Aussehen hängt jedoch von den Bildern ab, die du zeigen möchtest, da gif nur 255 Farben unterstützt.

    Viel Erfolg !

    Herr Krings



Willkommen!

Wenn Sie an den Diskussionen teilnehmen möchten, klicken Sie bitte hier. Sie werden dann zu www.internetbaukasten.de umgeleitet, um sich dort einzuloggen bzw. zu registrieren

Einloggen Registrierung!

Diskussionsteilnehmer

Tagged