kostenloser Webspace werbefrei: lima-city


2 Hintergrundbilder übereinander legen mit CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    fbd

    fbd hat kostenlosen Webspace.

    Könnte gleich mal etwas Hilfe gebrauchen ;)

    Und zwar möchte ich per CSS bei einem Joomla-Template 2 Hintergrundbilder übereinander legen.

    Das ganze sieht so aus dass die Seite eine feste Breite hat (960px), nun möchte ich einen kompletten Hintergrund der sich über die gesamte Bildschirmgröße erstreckt und einen anderen der darüber liegt und lediglich hinter dem eigentlichen "Content" bzw. der Seite, also den 960px liegt.

    Ich habe versucht beide Hintergrundbilder in einem Bild zu verwenden, und hierbei eben den Content-Hintergrund 960px breit zentriert auf den anderen gelegt und versucht dieses Bild zu verwenden, aber die Bildgröße stimmt dann natürlich auf der Seite nicht mehr, bin leider auch nicht sonderlich bewandert mit CSS, die Google-Suche hat lediglich DIVs und z-index ergeben, das hab ich aber leider nicht gebacken bekommen, gibt es auch einen anderen Weg um das umzusetzen?

    Hoffe auf Antworten ;)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. einfach 2 Hintergrund-Bilder mit CSS bei body und bei Deinem Content DIV

    body { 
      background: url('ganze_breite.jpg') no-repeat;
    } 
    
    #content {
      width:960px; 
      background: url('zweites_bild.jpg') no-repeat;
    }


    das zweite Billd (CSS background) muss halt in die "richtige" id für Dein Content DIV
    hier nur als Beispiel für die id="content", Deine id kann auch anderen Name haben.


    wenn Bild zu klein / zu groß ist,
    kann man es mit CSS auch auf die Box-Breite strecken

    BSP
    #content {
      width:960px; 
      background: url('zweites_bild.jpg') no-repeat;
      -moz-background-size: 100%;
      -webkit-background-size: 100%;
      -khtml-background-size: 100%;
      background-size: 100%;
    }



    oder CSS3 ... cover
    #content {
      width:960px; 
      background: url('zweites_bild.jpg') no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }


    siehe dazu auch: http://css-tricks.com/perfect-full-page-background-image/

    oder googeln nach "CSS hintergrund strecken" oder ähnliche Suche

  4. Autor dieses Themas

    fbd

    fbd hat kostenlosen Webspace.

    Danke für die rasche Antwort, sehr lässig :thumb:
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!