Ankündigung

Einklappen
Keine Ankündigung bisher.

Background Bild zentriert einfügen - responsive

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Background Bild zentriert einfügen - responsive

    Hallo, ich habe folgenden css-Code
    Code:
    .logo {
      display: block;
      width: 181px;
      height: 130px;
      background: #000 url(../img/layout/logo-trans.png) top left no-repeat;
      background-size: 181px;
      float: left;
    Nun möchte ich mein Logo ersetzen durch ein Bild mit der Größe 2350x480.
    Ich habe schon etliches probiert, doch es leider nicht geschafft, dass mein Logo zentriert - und nicht nur die linke Ecke des Bildes zentriert - und von der Größe her passend angezeigt wird.
    Kann mir hier wer einen Tipp geben?
    DANKE!

  • #2
    Hallo, Helene,

    Obwohl ich noch nicht viel Ahnung habe, versuche ich dennoch, einfach mal zu helfen:

    Zunächst: Du schreibst, das Ganze soll responsiv werden.
    Ich habe eine Seite mit einem teilresponsiven zentrierten Hintergrundbild erstellt.
    Es ist die http://www.gitarrenunterricht-neuss....rbeispiele.htm

    Ich arbeite dort mit MediaQueries, mit denen ich vier verschieden große Viewports definiert habe: Mobile, Tablet, Desktop klein und Dektop groß. Das untere Gitarrenfoto auf der Seite ist ein zentriertes Hintergrundbild.

    Das Schöne an Hintergrundbildern ist, dass Du sie in verschiedenen Größen bzw. Varianten vorlegen kannst. So habe ich die Hintergrundgitarre unten in drei verschiedenen Größen abgelegt, die ich je nach Viewport per zugeordnetem CSS-Abschnitt laden lasse:

    2350x480 ist ja ein ganz schöner Unterschied zu 181x330px und reicht locker für einen HD-Dekstop. Für z.B. Mobile ist das aber eher riesig.


    Für Dich am interessantesten ist vielleicht mein Tablet-Viewport, denn hier wird folgendes am ehesten deutlich:
    Das Foto ist zentriert und wird gleichmäßig zur Mittte hin zusammengeschoben, wenn Du die Darstellungsbreite des Browserfesters zusammenschiebst (klappt am ehesten mit einem Desktop-Rechner :-) .Links und rechts wird das Foto gleichmäßig gecuttet.
    Weiter bin ich noch nicht. Eine gleichmäßige Größenverringerung klappt zwar bei der quer liegenden Gitarre oben, aber das ist auch kein Hintergrundbild. Hier die Einträge fürs Tablet (oder um 90 Grad gedrehtes Mobile):

    @media only screen and (max-width: 990px),

    ...

    div.background {
    background-image: url(bilder/beispielfoto_500x660.jpg);
    background-repeat:no-repeat;
    background-position: center;
    width: 100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;

    }

    B.t.W. Mein Hintergrundbild ist kein durchgehendes Logo, deswegen fällt es außer beim Mobile immer kleiner aus als die maximale Viewportbreite.

    Viele Grüße
    Bernhard



    Kommentar


    • #3
      Zitat von helene Beitrag anzeigen
      Nun möchte ich mein Logo ersetzen durch ein Bild mit der Größe 2350x480.
      Für ein Logo ganz schön sperrig, meinste nicht.
      https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

      VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

      Kommentar

      homepage-forum.de - Hilfe für Webmaster! Statistiken

      Einklappen

      Themen: 56.857   Beiträge: 430.634   Mitglieder: 28.604   Aktive Mitglieder: 39
      Willkommen an unser neuestes Mitglied, Christian_Hansen.

      Online-Benutzer

      Einklappen

      200 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 196.

      Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X