+ Antworten
Seite 1 von 4 1 2 3 4 LetzteLetzte
Ergebnis 1 bis 10 von 35

Thema: Beitrag Hintergrund Foto

  1. #1
    Neu an Board
    Registriert seit
    22.06.2011
    Beiträge
    4
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard Beitrag Hintergrund Foto

    hallo,

    wie bekomme ich in ein Beitrag ein Hintergrund Foto, also hinter den Text ein Foto.

  2. #2
    Kommt häufiger vorbei
    Registriert seit
    26.02.2010
    Ort
    Schweiz
    Beiträge
    323
    Bedankte sich
    18
    Erhielt 82 Danksagungen
    in 78 Beiträgen

    Standard

    Hallo joomla2000

    Laut meinem Firebug ist dafür die CSS Klasse "item-page" zuständig.

    Eine Anweisung

    .item-page {
    background-image: url(hierdeinebild) ;
    }

    Müsste also den gewünschten Effekt bringen. Hab's kurs lokal ausgetestet. Falls Du irgendwo eine universelle Hintergrundfarbe definiert hast, dann musst Du noch den Hintergrund mit "background: transparent ;" auf transparent stellen, sonst hast Du u.U. hinter dem Text noch Hintergrundfarben statt Bilder.

    Gruss
    Michael
    Grüsse, Michael

  3. Erhielt Danksagungen von:


  4. #3
    Neu an Board
    Registriert seit
    22.06.2011
    Beiträge
    4
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    danke downunder2003 für die Antwort, nur bin ich noch ein Anfänger und ich habe keine Ahnung wo ich das einfugen soll, noch mal zu Info ich mochte für jeden Beitrag ein unterschiedliche Foto.


    Gruss
    joomla2000

  5. #4
    Kommt häufiger vorbei
    Registriert seit
    26.02.2010
    Ort
    Schweiz
    Beiträge
    323
    Bedankte sich
    18
    Erhielt 82 Danksagungen
    in 78 Beiträgen

    Standard

    Hallo Joomla2000

    Ok, kein Problem, hier ist eine Schritt-für-Schritt Anleitung:
    Es sei noch gesagt, dass das Ganze etwas aufwändig ist. Wie viele verschiedene Seiten hast Du denn?

    Anleitung für Joomla 1.6


    1. Den Seiten unterschiedliche Klassen zuweisen
    Im Menü-Manager klickst Du auf den Link zu deinem Beitrag. Dort findest Du rechts, unter dem Reiter "Seite Anzeigen Optionen" die Position "Seitenklasse". Dort gibst Du einen Klassennamen für alle jene Seiten ein, welche schlussendlich dasselbe Hintergrundbild haben sollen. (Wenn Du auf jeder Seite ein anderes Bild willst, musst Du halt jeder Seite eine eigene Klasse zuweisen). Bespielsweise schreibst Du dort rein: "-bg1" (ohne die Anführungszeichen)

    2. Die Hintergrundbilder auf dem Server hinterlegen
    Jetzt musst Du all deine Hintergrundbilder irgendwo auf dem Server ablegen. Da es sich hier um Design-Elemente handelt, würde ich vorschlagen diese in einen Unterordner in deinem Template-Image Ordner zu legen. Den Template-Image Ordner findest Du im Stammverzeichnis von Joomla unter

    /templates/HIER DER NAME DEINES TEMPLATES/images/

    Hier erstellst Du am besten noch mal einen Ordner "bg" (für background). Dort packst Du jetzt all deine Bilder rein.

    3. Die CSS Anweisungen schreiben

    Nun gehst Du in die CSS Datei deines Templates (findest Du hier /templates/HIER DER NAME DEINES TEMPLATES/css/) und schreibst folgendes rein:

    .item-page-bg1 {
    background-image: url(../images/bg/bg1.jpg) ;
    background-repeat: no-repeat ;
    overflow: hidden ;
    }

    Wobei "bg1.jpg" der Name deines 1. Hintergrundbildes ist
    Die zweite Zeile weist den Browser an, das Bild nicht zu wiederholen (bedingt natürlich, dass das Bild gross genug ist, sonst siehst du wieder den Hintergrund), die dritte Zeile weist den Browser an, den "Überhang" des Bildes (wenn es auf kleinen Bildschirmen z.B. zu breit ist) abzuschneiden. Die 2. und 3. Zeile sind optional, tragen aber wahrscheinlich zur Verschönerung bei.

    Diesen Code musst Du jetzt für jede Seite machen (entsprechend .list-item-bg1 und die Bildurl jeweils anpassen).
    Danach alles hochladen und fertig.
    U.U. musst Du noch Hintergrundfarben auf Transparent schalten (vgl. 1. Posting), aber dass kann ich Dir ohne Link zu deiner Seite nicht sagen.

    Am Besten versuchst Du mal ein, zwei Beiträge so umzusetzen und wenn's nicht klappt, meldest Du dich nochmal hier. Dann wäre aber ein Link zu deiner Webseite zwecks Fehlersuche ganz hilfreich.
    Grüsse, Michael

  6. Erhielt Danksagungen von:


  7. #5
    Neu an Board
    Registriert seit
    22.06.2011
    Beiträge
    4
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    hallo downunder2003

    leider hat es nicht geklappt ich weis nicht woran es liegt. Ich bin mir nicht sicher in welche css ich das einfugen soll, also ich habe die hier verändert template.css.

    die Seite heißt http://www.eikono-logia.eu/ ich mochte in den Beitrag Αρχική ein Hintergrund Bild haben.


    Ich habe das Problem gelöst ich habe die css general.css geändert. Ist das richtig oder muss ich noch in eine andre css was ändern ?
    Geändert von joomla2000 (22.06.2011 um 20:10 Uhr)

  8. #6
    --- Avatar von anka
    Registriert seit
    01.05.2008
    Ort
    Basel
    Beiträge
    11.403
    Bedankte sich
    445
    Erhielt 4.288 Danksagungen
    in 3.948 Beiträgen

    Standard

    Füge das hier ins templates/beez_20/css/personal.css ein:

    Code:
    .item-page-bg1 {
         background-image: url("../images/bg/bg1.jpg");
         background-repeat: no-repeat;
         overflow: hidden;
    }

    EDIT
    Offenbar hast du es inzwischen gelöst .
    Geändert von anka (22.06.2011 um 20:16 Uhr)
    Gruss Anka

  9. #7
    Neu an Board
    Registriert seit
    22.06.2011
    Beiträge
    4
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    ja also ich habe das in general.css geändert und es klappt sollte ich das lieber in personal.css ändern

  10. #8
    --- Avatar von anka
    Registriert seit
    01.05.2008
    Ort
    Basel
    Beiträge
    11.403
    Bedankte sich
    445
    Erhielt 4.288 Danksagungen
    in 3.948 Beiträgen

    Standard

    Technisch gesehen ist es egal, in welchem CSS du es einfügst. Du musst nur darauf achten, dass das CSS, in dem du den Hintergrund definiert hast, auch wirklich geladen wird. Beim Beez2 z.B. gibt es CSS-Dateien, die bei beiden Styles ("Default" und "Parkseiten") geladen werden (position.css, layout.css, print.css und general.css). Alles, was in diesen CSS definiert ist, gilt für beide Styles. Dazu gibt es für jeden Style noch ein zusätzliches, nur für einen Style gültiges CSS (personal.css bei "Default" und nature.css bei "Parkseiten").
    Gruss Anka

  11. Erhielt Danksagungen von:


  12. #9
    Neu an Board
    Registriert seit
    23.04.2009
    Beiträge
    71
    Bedankte sich
    17
    1 Danksagung in 1 Beitrag

    Standard

    Hallo!
    Genau das hier habe ich gesucht.. endlich gefunden Es funktioniert auch!
    Leider hab ich keine Ahnung vom coden.. Es ist doch sicherlich möglich, das Hintergrundbild zentriert oder rechtsbündig darzustellen!? Welchen Code muss ich dazu noch einfügen?

  13. #10
    Gute Seele des Boards Avatar von time4mambo
    Registriert seit
    11.12.2006
    Ort
    76646 Bruchsal
    Alter
    59
    Beiträge
    18.456
    Bedankte sich
    699
    Erhielt 3.779 Danksagungen
    in 3.543 Beiträgen

    Standard

    Zentriert:
    Code:
    .item-page-bg1 {
         background-image: url("../images/bg/bg1.jpg") no-repeat center;
         overflow: hidden;
    }
    Rechtsbündig:
    Code:
    .item-page-bg1 {
         background-image: url("../images/bg/bg1.jpg") no-repeat right;
         overflow: hidden;
    }
    Details und weitere Möglichkeiten:
    http://www.css4you.de/background-position.html


    Axel
    Schulungen, Webentwicklung: time4mambo
    Joomla- und Office-Tutorials: time4joomla
    Deutschsprachige SEBLOD-Community
    Kein Support per PM!

  14. Erhielt Danksagungen von:


+ Antworten
Seite 1 von 4 1 2 3 4 LetzteLetzte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein