Results 1 to 10 of 10

Thread: Fixed Background Picture, Transparency

  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default Fixed Background Picture, Transparency

    Is it possible to create with NOF 9 or 10 a website like the new igoogle-Website: http://www.google.de/ig?

    I am interested in creating a very simple website with
    - a fixed background picture (the picture always stays the same, no matter how big the window is and no matter how much content is on the website - even if you scroll down, the picture remains the same)
    - text fields with transparent background colours

    Thanks for your support,
    Sven

  2. #2
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default

    Quote Originally Posted by Sven View Post
    Is it possible to create with NOF 9 or 10 a website like the new igoogle-Website: http://www.google.de/ig?

    I am interested in creating a very simple website with
    - a fixed background picture (the picture always stays the same, no matter how big the window is and no matter how much content is on the website - even if you scroll down, the picture remains the same)
    - text fields with transparent background colours

    Thanks for your support,
    Sven
    Really nobody? I would be great to see if someone can help me out here.

    thanks,
    Sven

  3. #3
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Hi,

    this is my NOF help page (in German) but you will find an extremely simple script and maybe it helps.

    http://www.tommyherrmanndesign.com/n...ndbild-Skript/

    ... just put this in your html editor of NOF > between head tags - that's it (and adjust your relative path to your image).

    Code:
    <style type="text/css">
    html {
           background: url(../assets/images/your-background-image.jpg) no-repeat center center fixed;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           -o-background-size: cover;
           background-size: cover;
    }
    </style>
    Last edited by Thomas Frei-Herrmann; 03-11-2012 at 04:17 PM.
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  4. #4
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default

    Hi,

    Vielen Dank, hat geklappt. Und wie hast du das mit den transparenten Textfeldern gemacht?

    Sven

  5. #5
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Moin Sven,

    are you German?

    .. na einfach extra Layout-Bereiche aufgezogen und eine kleine halb-tansparente Grafik (schmalen Streifen) als Hintergrund des jeweiligen Layout-Bereichs angegeben, die ich vorher mittels Grafik-Programm erstellt habe.

    ... bei dem Hintergrund der Navi habe ich es genauso gemacht. Einen Layout-Bereich unter die Navi gelegt und noch eine Style-Anweisung (CSS-Class) " header" oben im Head gegründet. Diesem Layout-Bereich (unter der Navi) habe ich dann diese ID gegeben, also vor dem Tag:

    Code:
    <div id="header">
    und nach dem Tag:

    Code:
    </div>

    Guckst Du hier:

    http://www.tommyherrmanndesign.com/n.../tutorial.html

    Code:
    <style type="text/css">
      html {
              background: url(../assets/images/Meer.jpg) no-repeat center center fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
      }
       
      #header {
           position:absolute;
           top:100px; left:0px; right:0px;
           border-top:1px solid white;
           border-bottom:1px solid white;
           padding:0px;
           padding-bottom: 20px;
           background-image: url(../assets/images/LayoutBG.png);
           background-repeat: repeat-x;
      }
      </style>
    Last edited by Thomas Frei-Herrmann; 03-12-2012 at 05:26 AM.
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  6. #6
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default

    Die halbtransparente Grafik habe ich erstellt, als PNG-Datei gespeichert und dann als Hintergrund des Textfeldes definiert. Soweit so gut. Wird dann allerdings nicht transparent angezeigt. An was könnte das liegen?
    Grüße aus Karlsruhe,
    Sven

  7. #7
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default

    Mit dem halbtransparenten Hintergrund bin ich leider noch nicht weitergekommen. Wie gesagt Grafik ist erstellt (PNG), aber beim Einfügen in NOF wird es als nicht transparent dargestellt.
    Wenn du da noch einen Tipp hättest, wäre das super.
    Danke, Sven

    Quote Originally Posted by Thomas Frei-Herrmann View Post
    Moin Sven,

    are you German?

    .. na einfach extra Layout-Bereiche aufgezogen und eine kleine halb-tansparente Grafik (schmalen Streifen) als Hintergrund des jeweiligen Layout-Bereichs angegeben, die ich vorher mittels Grafik-Programm erstellt habe.

    ... bei dem Hintergrund der Navi habe ich es genauso gemacht. Einen Layout-Bereich unter die Navi gelegt und noch eine Style-Anweisung (CSS-Class) " header" oben im Head gegründet. Diesem Layout-Bereich (unter der Navi) habe ich dann diese ID gegeben, also vor dem Tag:

    Code:
    <div id="header">
    und nach dem Tag:

    Code:
    </div>

    Guckst Du hier:

    http://www.tommyherrmanndesign.com/n.../tutorial.html

    Code:
    <style type="text/css">
      html {
              background: url(../assets/images/Meer.jpg) no-repeat center center fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
      }
       
      #header {
           position:absolute;
           top:100px; left:0px; right:0px;
           border-top:1px solid white;
           border-bottom:1px solid white;
           padding:0px;
           padding-bottom: 20px;
           background-image: url(../assets/images/LayoutBG.png);
           background-repeat: repeat-x;
      }
      </style>

  8. #8
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Moin Sven,

    Du verwendest ja hier einfach einen extra Layout-Bereich als DIV-Container, dies ist die einzige Aufgabe für diesen Layout-Bereich in diesem Fall.

    Mit der Style-Anweisung gründest Du die ID "header", gibst an, dass die Position "absolute" ist, wo das Teil erscheinen soll (insofern ist es vollkommen egal wo Du diesen Layout-Bereich auf Deiner Seite von NOF aufziehst), ich habe dann noch einen Rahmen (border) angegeben und nach unten einen Abstand von 20px. Dann eben meinen transparenten Hintergrund-Schnipsel verlinkt und angegeben, dass sich dieser waagerecht (repeat-x) wiederholt.

    Hier mal als Beispiel die Einstellungen des transparenten Hintergrunds hinter meiner Navi auf dieser Seite

    http://www.tommyherrmanndesign.com/n...ullscreen.html

    Code:
    #header {
             position:absolute;
             top:100px; left:0px; right:0px;
             border-top:1px solid white;
             border-bottom:1px solid white;
             padding:0px;
             padding-bottom: 20px;
             background-image: url(../assets/images/LayoutBG.png);
             background-repeat: repeat-x;
        }
    Diese ID trägst Du dann in der Objekt-HTML des Layout-Bereichs ein und fertig, siehe Screenshot


    Attachment 1126

    P.S.:

    kannst Dir ja mein transparentes .png hier klauen und mal gucken.

    http://www.tommyherrmanndesign.com/n...s/LayoutBG.png
    Last edited by Thomas Frei-Herrmann; 03-18-2012 at 09:41 AM.
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  9. #9
    Junior Member
    Join Date
    Oct 2010
    Posts
    8

    Default

    Danke, hab's hinbekommen!

  10. #10
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    ... na bestens
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •