Wiele obrazów w tle

CSS3 pozwala na umieszczenie kilku obrazów w tle bez kombinowania z dodatkowymi elementami układu (np. divami), tak jak było to w starszej wersji. Kod arkusza można zapisać na dwa sposoby: dłuższy i krótszy. W tym wpisie przedstawię oba.

Poszczególne właściwości tła można określić na osobnych warstwach. Sprawia to wrażenie bardziej przejrzystego i zgrabnego kodu, ale za to dłuższego. Wyobraźmy sobie, że dla body chcemy użyć dwóch obrazów jako tła, np. na górze i na dole. W CSS3 zrobimy to tak:

body {
   background-image: url('tlo1.jpg'), url('tlo2.jpg');
   background-position: center top, bottom;
   background-repeat: no-repeat, repeat;
}

Jak widać, dla każdego tła możemy nadać odpowiednie cechy wymieniając je po przecinku.

Wersja skrócona wygląda następująco:

body {
  background: url('tlo1.jpg') center top no-repeat, url('tlo2.jpg') bottom repeat;
}

Powiązane Wpisy

Centrowanie

Wyśrodkowanie div’...

textillate js

textillate.js...

CSS3 Patterns

CSS3 Patterns Gallery...

Komentarze

  1. Vorli dnia 31 lipca 2013 o 10:49 napisał(a):

    Pytanie moje brzmi.
    Jaki kod wpisać by wyświetlały się przy każdym wejściu inne tło z danego zbioru obrazów?

    Z tego co mi wiadomo, da się to ogarnąć ale nie mogę znaleźć.
    THX za pomoc. Z góry dzięki.

    • master_chef dnia 21 sierpnia 2013 o 22:55 napisał(a):

      najszybciej:
      <?php
      $bg = 'lokalizacja_folderu_grafik';
      $grafiki = preg_grep('/^\w+\.(jpeg|jpg|png|gif)$/i', scandir($bg));
      echo 'body{background-image:url(‚.bg.’/’.array_rand($grafiki).’);}’;
      ?>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *