Hintergrundbild i ei Element einfügen

  • hallo zusammen, wie einige andere auch, bin ich der totale neuling in HTML geschichten und bei dieser seite hängengeblieben. fettes lob natürlich auch von mir.


    so, nun genug der lobhuddelei und zu meiner frage ;)


    es geht mal wieder um mdas leidige thema hintergrundbilder.
    bei mir ists konkret das einfügen eines hintergrundbildes in die überschrift h1. zum besseren verständnis hier mal mein versuch


    <style type="text/css">


    h1 {text-align: left;
    border:2px solid black;
    margin-left:150px;
    margin-right:150px;
    font-size:50pt;
    color:#00631E;
    }


    </style>



    also alles funktioniert und bekomm ich auf die reihe, rahmen, schrift in sämtlichen farben und formen und auch der hintergrund, wenn ich eben noch "background-coler:XXXXXX;" einfüge. nur eben nich das bild.
    ich habe also oben unter "color:#00631E;" noch folgende zeile (ohne gänsefüsse) eingefügt:


    "backgound-image:bildname.jpg;"


    das bild liegt im selben verzeichnis, wie die htm seite. es ist auch ein jpg, der name stimmt auch. das einzige was nich angezeigt wird, ist das bild im element. ich wollte, dass das ganze dem folgenden ähnelt:


    <!-- m --><a class="postlink" href="http://www.html-seminar.de/css-einsetzen.htm">http://www.html-seminar.de/css-einsetzen.htm</a><!-- m -->


    auf der seite ist relativ weit unten so ein beispiel. da ist hinter dem grünen herzlich willkommen ein foto einer augenpartie mit brille. ich hoffe, ihr wisst was ich meine.


    bis dann und danke im voraus

  • oh man, gibts das. ich dachte immer das url soll als beispiel stehen, also als hinweis, dass da die url hin kommt, ich bin fast verzweifelt dran.


    okay, wenn wir schon dabei sind, also das bisl is nu in dem element, aber eben mehrere male und nebeneinander. wie bekomm ich das gefixt, das es nur einmal da is. auf der rechten seite z.b.?



    und hier nochma ein dickes fettes DANKE für die hilfe

  • hi..


    ..das kenne ich.. manchmal ist es wie verhext.... :P




    (repeat=wiederholen --- no-repeat = nicht wiederholen)


    Code
    background-repeat:no-repeat; 
    
    
    
    
    Verhaltensweise des Bilds - ob es nur einmal angezeigt wird oder wiederholt - folgende Werte sind möglich:
    repeat = wiederholen (Standard)
    repeat-y = nur in Y-Richtung, also senkrecht wiederholen
    repeat-x = nur in X-Richtung, also waagerecht wiederholen
    no-repeat = nicht wiederholen, nur einmal anzeigen



    siehe auch hier auf Deiner schon gefundenen schlauen Seite:
    <!-- m --><a class="postlink" href="http://www.html-seminar.de/css-einsetzen.htm">http://www.html-seminar.de/css-einsetzen.htm</a><!-- m -->


    :)

  • noch als Tipp, wozu hier auch schon einmal geschrieben wurde -


    Ergänze diesen Header-Eintrag durch die 'Kommentar'-Zeichen
    also

      <style type="text/css">
      <!--
      h1 {text-align: left;
      border:2px solid black;
      margin-left:150px;
      margin-right:150px;
      font-size:50pt;
      color:#00631E;
      }
      -->
      </style>


    ist ein kleines Soll/Muss für alte Browser, die mit CSS absolut noch nichts anzufangen wissen.


    Auch mit Mumien muss immer noch gerechnet werden :lol:

  • Das 'Kommentar'-Zeichen wird benutzt um Browser, die noch gar nicht wissen was CSS überhaupt ist, es zu erleichtern.


    Wenn der Browser auf <style type="text/css">...</style> stößt und CSS nicht verarbeiten kann, dann überliest er die CSSangaben, bzw. behandelt sie wie ein Kommentar.


    Wenn allerdings keine 'Kommentar'-Zeichen vorhanden sind könnte "das neue" Probleme bereiten, da er nichts mit anfangen kann.


    Ich hoffe ich konnte dir es verständlich erklären :wink:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!