+ Antworten
Ergebnis 1 bis 10 von 10

Thema: CSS: Hintergrundgrafik im 'Hauptfenster' ausrichten?!

  1. #1
    Neu an Board
    Registriert seit
    01.05.2008
    Ort
    Niedersachsen
    Alter
    41
    Beiträge
    29
    Bedankte sich
    13
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Frage CSS: Hintergrundgrafik im 'Hauptfenster' ausrichten?!

    Moin.

    Meine Hintergrundgrafik (ein einzelnes grosses Bild) zentriert sich in der Mitte des Bildschirmes.
    Sie soll sich aber horizontal in der Mitte des fensters mit dem Hauptinhalt (Ihr wisst schon was ich meine) zentrieren und einen festen Abstandzum oberen Rand dessen haben.

    Code:
    #content650 {
    float:left;
    width:650px;
    overflow:hidden;
    background:#ffffff url(/templates/standard/images/background.jpg) no-repeat fixed center;
    }
    Wie muss ich da was ändern?
    Als Anfänger bin ich für jeden Hinweis dankbar.

    Grüsse,

    C.
    Geändert von ingolenssen (30.12.2009 um 09:10 Uhr)

  2. #2
    Moderator Avatar von time4mambo
    Registriert seit
    11.12.2006
    Ort
    76646 Bruchsal
    Alter
    54
    Beiträge
    14.363
    Bedankte sich
    456
    Erhielt 2.977 Danksagungen
    in 2.795 Beiträgen

    Standard

    Code:
    body {
    background:url(../images/bg.jpg) no-repeat  center top #000000;
    background-position:30px 20px;
    }
    Musst damit mal etwas spielen.
    Mehr Infos findest du hier: http://de.selfhtml.org/css/eigenscha...round_position



    Axel
    Schulungen, Webentwicklung: time4mambo
    (Video-)Tutorials: time4joomla

  3. Erhielt Danksagungen von:


  4. #3
    --- Avatar von anka
    Registriert seit
    01.05.2008
    Ort
    Basel
    Beiträge
    9.077
    Bedankte sich
    342
    Erhielt 3.298 Danksagungen
    in 3.084 Beiträgen

    Standard

    Sorry, wenn ich dazwischenfunke, aber die Syntax von Axels Code ist nicht ganz richtig . Entweder kommen alle Eigenschaften auf die gleiche Zeile (dann verwendet man "background"):
    Code:
    body {
    background: #ffffff url(../images/bg.jpg) no-repeat 50px center;
    }

    oder jede Eigenschaft wird explizit definiert, dann müsste es so aussehen:
    Code:
    body {
    	background-color: #ffffff;
    	background-image: url(../images/bg.jpg);
    	background-repeat: no-repeat;
    	background-position: 50px center;
    }
    Häufige Fragen und Antworten zu Joomla: Joomla FAQ - Kleines Helferlein: Firebug
    Joomla braucht dich!

    Kein Support per PN


  5. Erhielt Danksagungen von:


  6. #4
    Moderator Avatar von time4mambo
    Registriert seit
    11.12.2006
    Ort
    76646 Bruchsal
    Alter
    54
    Beiträge
    14.363
    Bedankte sich
    456
    Erhielt 2.977 Danksagungen
    in 2.795 Beiträgen

    Standard

    Deswegen schrieb ich ja auch "musst mit rumspielen". Aber du hast recht, ich hätte es vielleicht deutlicher schreiben müssen


    Axel
    Schulungen, Webentwicklung: time4mambo
    (Video-)Tutorials: time4joomla

  7. #5
    Neu an Board
    Registriert seit
    01.05.2008
    Ort
    Niedersachsen
    Alter
    41
    Beiträge
    29
    Bedankte sich
    13
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Vielen Dank!

    Dinge können wirklich einfach sein (wenn man - so wie Ihr - etwas davon versteht).
    Bei mir funktioniert Axels Code, es sieht jetzt so aus:

    HTML-Code:
    body {
    background:#ffffff url(/templates/standard/images/background.jpg) fixed no-repeat;
    background-position:253px 180px;
    font-size:76%;
    font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    line-height:1.3;
    margin:1em 0;
    }
    Wobei mir sich da nicht die Prozentangabe von 76% erschliesst.
    Aber das Bild ist da wo es hin soll .

    Wenn's funktioniert: soll ich das jetzt aus Kompatibiliätsgründen noch ändern?

    Grüsse,

    C.

  8. #6
    Neu an Board
    Registriert seit
    01.05.2008
    Ort
    Niedersachsen
    Alter
    41
    Beiträge
    29
    Bedankte sich
    13
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Moin.

    Ich hab's jetzt so:

    HTML-Code:
    body {
    background-color: #ffffff;
    background-image: url(/templates/standard/images/background.jpg);
    background-repeat: no-repeat;
    background-position:253px 180px;
    font-size:76%;
    font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    line-height:1.3;
    margin:1em 0;
    }
    Besser?
    Aber wo bringe ich denn da jetzt das FIXED unter?



    C.

  9. #7
    --- Avatar von anka
    Registriert seit
    01.05.2008
    Ort
    Basel
    Beiträge
    9.077
    Bedankte sich
    342
    Erhielt 3.298 Danksagungen
    in 3.084 Beiträgen

    Standard

    Einfach diese Zeile einfügen:
    Code:
    background-attachment: fixed;

    @Axel
    Ich habe es nur deshalb hervorgehoben, weil für jemanden, der sich mit CSS nicht gut auskennt, so ein "Flüchtigkeitsfehler" zu einer harten Nuss werden kann
    Geändert von anka (30.12.2009 um 10:50 Uhr) Grund: Grammatik ;-(
    Häufige Fragen und Antworten zu Joomla: Joomla FAQ - Kleines Helferlein: Firebug
    Joomla braucht dich!

    Kein Support per PN


  10. #8
    Neu an Board
    Registriert seit
    01.05.2008
    Ort
    Niedersachsen
    Alter
    41
    Beiträge
    29
    Bedankte sich
    13
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Zitat Zitat von anka Beitrag anzeigen
    1. Einfach diese Zeile einfügen...
    2. jemanden, der sich mit CSS nicht gut auskennt
    1. DANKE!
    2. Hier, ich!

  11. #9
    Moderator Avatar von time4mambo
    Registriert seit
    11.12.2006
    Ort
    76646 Bruchsal
    Alter
    54
    Beiträge
    14.363
    Bedankte sich
    456
    Erhielt 2.977 Danksagungen
    in 2.795 Beiträgen

    Standard

    Zitat Zitat von anka Beitrag anzeigen
    Einfach diese Zeile einfügen:
    Code:
    background-attachment: fixed;

    @Axel
    Ich habe es nur deshalb hervorgehoben, weil für jemanden, der sich mit CSS nicht gut auskennt, so ein "Flüchtigkeitsfehler" zu einer harten Nuss werden kann
    Hast ja Recht -


    Axel
    Schulungen, Webentwicklung: time4mambo
    (Video-)Tutorials: time4joomla

  12. #10
    Neu an Board
    Registriert seit
    14.08.2006
    Beiträge
    6
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Hallo Zusammen

    Ich habe eine Frage zum Thema. Auch ich könnte durch anka's Code mein Hintergrund platzieren.

    Es ist nun horizontal gesehen in der Mitte zentriert.
    Aber offenbar betrifft das auch die vertikale.
    Leider sehe ich den oberen Teil des Hintergrundbildes nicht. Es ist nur der untere Teil dargestellt.

    Wie lautet denn der CSS-Code wenn der oberste Teil des Bildes auch zuoberst beginnen soll? Also vertikal gesehen, meine ich.
    Ich hoffe ihr versteht was ich meine.

    Edit: Habs Herausgefunden. Mit dem Wert "top".
    body {
    background-position: center top;
    }
    Gruss Spoiler
    Geändert von Spoiler (29.01.2010 um 12:55 Uhr)

+ Antworten

Lesezeichen

Berechtigungen

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