Beginnerin: 2 Grafiken mit Breitenanpassung

Hallo Leute!

Ich habe ein Problemchen und hoffe inständig um Hilfe...Ich möchte statt Frames zwei Hintergrundbilder in meine Homepage einfließen lassen. Man muss sich das als L-Format im linken Bildschirmeck vorstellen.
Die erste Grafik (nennt sich bei mir links.jpg) soll über die gesamte Bildschirmlänge erscheinen. Sie soll im linken oberen Eck positioniert werden und nicht scrollbar sein.
Die zweite Grafik soll ganz oben am Bildschirm, direkt nach links.jpg anschließen und in weiterer Folge sich ganz nach rechts ausbreiten. Diese Grafik soll scrollbar sein.
Zudem sollte die Page auch noch Smartphonefähig sein...
Ich hoffe wirklich, dass ihr mir helfen könnt. Sitze schon ewigkeiten vor dem Bildschirm und surf durch Foren, doch mein Problem wird nicht wirklich behandelt...
Danke und Lg

  1. Om nah hoo pez nyeetz, Beginnerin!

    Elemente können mehrere Hintergrundgrafiken haben.

    mehrere Hintergründe
    http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder
    http://wiki.selfhtml.org/wiki/Benutzer:Cinematic/linear-gradient()

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Auto und Automat.

    1. Danke für die rasche Antwort!
      Werde jetzt mal herum-probieren, was ich davon umsetzen kann....
      Hoffe meine Frage klärt sich jetzt auf...ansonsten schrei ich nochmal um Hilfe...

      glg

      1. Om nah hoo pez nyeetz, Beginnerin!

        Werde jetzt mal herum-probieren, was ich davon umsetzen kann....
        Hoffe meine Frage klärt sich jetzt auf...ansonsten schrei ich nochmal um Hilfe...

        Mach das. Für den Hilfeschrei wäre es sinnvoll, wenn du die Seite zeigen könntest.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen scheu und Scheune.

    2. Hmm...es funktioniert nicht recht, so wie ich das möchte...hab da mal was hochgeladen...ich habs noch nicht auf CSS umgeschrieben, damit ihr wisst, was ich meine.
      Das "Maggie-Moden" soll srcollbar sein...die Grafik auf der linken Seite nicht...zudem sollte die Größe nicht nur für meinen Bildschirm passend sein (denke,bei eurem Bildschirm schaut das furchtbar aus...)

      http://trytrytry.funpic.de/Testpage/Home.html

      1. Om nah hoo pez nyeetz, Beginnerin!

        Das "Maggie-Moden" soll srcollbar sein...die Grafik auf der linken Seite nicht...zudem sollte die Größe nicht nur für meinen Bildschirm passend sein (denke,bei eurem Bildschirm schaut das furchtbar aus...)

        Maggie-Moden könnte das Hintergrundbild eines header-Elementes sein oder auch

        <header>  
          <h1><a href="...">Maggie-Moden</a></h1>  
        </header>
        

        und die beiden Figuren links und rechts der Überschrift werden als Pseudoelemente generiert.

        generierter Inhalt --> content

        Die Grafik der linken Seite das Hintergrundbild des html-Elements. Damit es in der ganzen Höhe schön grau ist, bekommt das html-Element grau als Hintergrundfarbe. Damit die Inhalte neben dem Bild bleiben, bekommt das html-Element einen linken Innenabstand in der Breite des Bildes.

        Das body-Element bekommt einen weißen Hintergrund.

        Für ("Unten") solltest du kein Bild verwenden, weil dann z.B. deine Adresse nicht ausgewählt und kopiert werden kann.

        Hier ist angebracht:

        <footer>  
          <address>Hauptplatz...</address>  
        </footer>
        

        Siehe auch: Selfblog - HTML5-Serie

        Damit es auf allen Bildschirmen deinen Vorstellungen entsprechend aussieht, benötigst du

        Die Darstellung auf tablets und smartphones ist noch mal eine andere Geschichte.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Komma und Kommandeur.

        1. Recht herzlichen Dank!
          Ich mach mich gleich an die Arbeit...
          Ja, den Footer hab ich schon zuvor ausgebessert...Bin mal gespannt, ob das alles so funktioniert!!!!