background-image im Tutorial

  • Hallo


    Bin gerade dabei das Tutorial über CSS durchzuarbeiten. Bin beim Punkt "CSS einsetzen" beim Absatz "Grafik und Bilder" --> background-image.


    Wollte testweise ein Bild zu h1 hinzufügen mit "background-image: url("hintergrund.jpg");", wie auf der Homepage angegeben.
    Leider funkioniert das nicht!?
    Kann mir hier jemand weiter helfen!?
    Danke
    P.S.
    - (als Testbild benutze ich "HTML-Seminar", hatte ich mir weiter vorher schon von dieser Seite runter geladen, hat auch bei vorherigen Tests funktioniert...)
    - habe "hintergrund.jpg" durch "html-kurs-mit-hintergrund.jpg" ersetzt
    Habe auch schon probiert:
    - mit/ohne Leerzeichen zw. : und url
    - mit/ohne Pfadangabe des Bildes (Bild liegt im gleichen Ordner wie die index.htm
    - mit/ohne Anführungszeichen
    - mit einfachen Anführungszeichen

  • probiermal die bindestriche durch unterstriche zu ersetzen


    EDIT


    obwohl die bindestriche auch funktionieren sollten


    schick mal n bischen code mit :D


    vielleicht ist es auch nur semikolon vergessen worden :wink:

  • Leider kann Erfolg!
    Bild-Name ist auch wirklich mit Bindestrichen.


    Was ich vorher auch schon probiert hatte:
    background-image durch nur background ersetzt (habe ich ebenfalls im Internet gefunden...)

  • <style type="text/css">
    <!--
    /* Kommentar */
    h1 {
    background-image: url("html-kurs-mit-hintergrund.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left;
    }
    -->
    </style>

  • bitte verwende im editor den code button :D

    Code
    code sieht dann so aus


    EDIT


    CSS funktioniert :roll:


    nun den HTML code


    im übrigen
    du kannst die für das problem wichtigen code snippets gleich am anfang angeben
    verschafft überblick und spart zeit

  • Alles klar!


  • Die Frage ist recht kompliziert, warum geht


    Code
    img[alt=bild]{...}


    genau so wie


    Code
    img[alt="bild"]{...}


    ?


    Und ich frage mich wie du darauf kommst das es mit " auch geht, dem 1. Beitrag nach zu urteilen geht es doch eben nicht oder?

  • Zitat von &quot;Basiii&quot;

    Da kommt es denke ich ganz auf den Browser an,


    wie gesagt, im Normalfall schreibt man den url() Befehl ohne Anführungszeichen.


    Entschuldige Basti.. aber wo steht das? Die W3C lässt dies offen, verwendet aber bei fast allen ihren Codeschnippseln ebenfalls Anführungszeichen :roll:


    Zitat von &quot;http://www.w3.org/TR/CSS2/colors.html#background&quot;
    Code
    background: url("http://example.com/marble.png")


    PS:W3C - Syntax and basic data types

  • Also zurück zum Thema, denn wie es mir scheint ist das Problem noch nicht gelöst.


    Mit dem Code ist also alles in Ordnung


    und du meinst, dass das Bild im selben verzeichnis liegt


    klingt jetzt ulkig aber benenne das bild mal anders
    ganz kurz zB: xyz


    und vergiss nicht es im style Abschnitt zu ändern

  • Hallo Peter1978,


    um Bilder sicher im Zugriff zu haben lege ich sie immer in einem Ordner ab der definitiv zur Seite gehört auf dem es dargestellt werden soll, so findet man später die Bilder leichter zur Bearbeitung und Änderungen.


    versuche es mal einfach mit einem Ordner in dem das Bild liegt:


    Code
    background-image: url(Grundseite/html-kurs-mit-hintergrund.jpg);


    das sollte funktionieren.



    Viele grüße
    Lacido

  • das ist auch eine ordentliche art und weise :D


    sehr gut


    aber ich weis nicht ob das problem von Gordi76 damit gelöst ist


    ich glaube das er zu übungszwecken die ordnersrtuktur einfachhält
    es werden auch nicht so viele dateien erzeugt - die übersicht bleibt gewahrt

  • Am einfachsten lässt sich eine Seite wie folgt gestalten:


    Ohne PHP:


    Ordner: css (CSS Dateien), img (Bilder)


    Mit PHP:


    Ordner: css (CSS Dateien), img (Bilder), script (für PHP Scripte, aber auch JavaScript)


    Darin kann man ja z.B. Unterverzeichnisse erstellen:


    img -> inhalt, design

Jetzt mitmachen!

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