kostenloser Webspace werbefrei: lima-city

2 Hintergrundbilder übereinander legen mit CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fbd

   fbd hat kostenlosen Webspace.

   2:41, 19.12.2013

   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. webnfo

   webnfo hat kostenlosen Webspace.

   8:34, 19.12.2013

   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.

   10:11, 19.12.2013

   Danke für die rasche Antwort, sehr lässig

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?