Czy mogę mieć wiele obrazów tła za pomocą CSS?

316

Czy można mieć dwa obrazy tła? Na przykład, chciałbym, aby jedno zdjęcie powtórzyło się u góry (powtórz x), a drugie powtórzyło na całej stronie (powtórz), gdzie jedno na całej stronie znajduje się za tym, które powtarza się u góry.

Przekonałem się, że mogę uzyskać pożądany efekt dla dwóch obrazów tła, ustawiając tło html i body:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Czy to „dobry” CSS? Czy istnieje lepsza metoda? A co jeśli chciałbym trzy lub więcej obrazów tła?

css background-image Rudd Zwoliński
źródło

Odpowiedzi:

377

CSS3 pozwala na tego typu rzeczy i wygląda to tak:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Obecne wersje wszystkich głównych przeglądarek obsługują teraz tę funkcję , jednak jeśli potrzebujesz obsługi IE8 lub niższej, najlepszym sposobem na obejście tego jest posiadanie dodatkowych div:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
pseudonim
źródło
27
Wiele wersji jest obsługiwanych przez najnowsze wersje Firefox, Chrome, Safari i Opera. Będzie także obsługiwany w IE9. en.wikipedia.org/wiki/…
Šime Vidas
4
A jeśli chcesz mieć inne ustawienia powtarzania / pozycji, możesz to zrobić: css3.info/preview/multiple-backgrounds
Krisc
2
W przypadku IE8 - IE6 można użyć PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/...
Aleš Kotnik
1
Czy rozmiar tła jest zgodny z tą samą zasadą? Chcę, aby wszystkie moje tła były na pełnej wysokości, z wyjątkiem jednego z nich (którym chcę być wysokość obrazu).
mtmurdock
Tak, rozmiar tła jest zgodny z tą samą regułą (jak wszystkie inne właściwości tła). Właściwości tła (zwykle zaczynające się od przedrostka background-, a następnie określonej właściwości tła) można faktycznie określić w samej właściwości background, więc ponieważ obsługiwanych jest wiele obrazów tła, obsługiwanych jest także wiele wymienionych właściwości. Dotyczy to wielkości, pozycji, powtórzeń itp.
Cannicide
35

Najprostszym sposobem, w jaki znalazłem użycie dwóch różnych obrazów tła w jednym div, jest ten wiersz kodu:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Oczywiście, nie musi to dotyczyć wyłącznie strony internetowej, możesz użyć tego dla każdego diva, który chcesz.

Mam nadzieję, że to pomaga! Na moim blogu jest post, który mówi o tym trochę bardziej szczegółowo, jeśli ktoś potrzebuje dalszych instrukcji lub pomocy - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

TheLibzter
źródło
Zauważ, że działa to tylko z tłem, a nie z obrazem w tle
yoel halb
24

Użyj tego 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

prosty sposób na dostosowanie każdej pozycji obrazu za pomocą położenia tła: i ustawienie właściwości powtarzania za pomocą powtarzania tła: dla każdego obrazu osobno

code.rider
źródło
13

Aktualna wersja FF i IE oraz niektóre inne przeglądarki obsługują wiele obrazów tła w pojedynczej deklaracji CSS2. Zajrzyj tutaj http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ i tutaj http://www.quirksmode.org/css/multiple_backgrounds.html i tutaj http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

W przypadku IE możesz rozważyć dodanie zachowania. Zajrzyj tutaj: http://css3pie.com/

Shannon
źródło
4

Tak, jest to możliwe i zostało wdrożone przez popularną witrynę testową użyteczności Silverback . Jeśli spojrzysz na kod źródłowy, zobaczysz, że tło składa się z kilku obrazów umieszczonych jeden na drugim.

Oto artykuł pokazujący, jak to zrobić, można znaleźć na Witaminie . Podobną koncepcję owijania tych warstw „skórki cebuli” można znaleźć w A List Apart .

Mike B.
źródło
4

Jeśli chcesz mieć wiele obrazów tła, ale nie chcesz, żeby się nakładały, możesz użyć tego CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

dzięki tej strukturze HTML:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
Rachel
źródło
2 

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>
Rozwiń fragment kodu

Możemy łatwo dodawać wiele obrazów za pomocą CSS3. możemy przeczytać szczegółowo tutaj http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
źródło
1

Możesz mieć div dla góry z jednym tłem i drugim dla strony głównej i oddzielić zawartość strony między nimi lub umieścić zawartość w pływającym div na innym poziomie Z. Sposób, w jaki to robisz, może działać, ale wątpię, aby działał w każdej napotkanej przeglądarce.

Sean James
źródło