chevron-left chevron-right

[CSS] Jak stworzyć wiele obrazków tła dla jednego elementu?

Na pewno się czasem zastanawiałeś/aś, czy da się zrobić tak, aby dla jednego elementu na stronie dać kilka obrazków tła, które będą się układały tak jak tego chcesz. Dzięki nowej specyfikacji języka CSS to jest już możliwe.
CSS w wersji 3-ciej wprowadza wiele ulepszeń dotyczących tworzenia wyglądu stron WWW, a jednym z nich jest zastosowanie wielokrotnego tła dla elementu strony, które to tło można dowolnie pozycjonować, według własnego "widzimisię".

Dla celów tego tutoriala przyjąłem następującą strukturę kodu HTML strony:

<div id="head">
   <h1>Tytuł strony</h1>
   <h2>Podtytuł strony</h2>
</div>
<div id="tresc">
   <h3>Tytuł informacji</h3>
   <p>Duis condimentum faucibus volutpat, erat blandit lectus. In fermentum. Aliquam eleifend, ligula. Aliquam malesuada tristique velit, a dolor sit amet, nibh. Ut sed nulla eu pede convallis justo. Integer gravida tellus enim, ac nunc. Phasellus a wisi. Phasellus a elit. Mauris vitae mi. Morbi felis vitae wisi dui eu pulvinar nec, lacinia sit amet, est. Duis nonummy laoreet, ante sit amet sapien auctor vitae, consequat id, libero. Morbi facilisis luctus mauris sed ante. Vivamus imperdiet quis, velit. Mauris leo. Ut sagittis eleifend. Nulla sed aliquet commodo magna, at ante. Pellentesque bibendum, sem at tellus. Morbi eleifend. Nulla quis mauris nibh orci quis metus. Vestibulum ante a leo. Sed euismod nulla orci nec libero. Duis at quam. Aliquam ut wisi. Curabitur condimentum et, commodo odio nec egestas ac, eros. Mauris id sapien sapien, ornare vitae, imperdiet sagittis, ipsum primis in ultricies pretium. Praesent a augue eu sem tincidunt quis, lorem. Vivamus vulputate tempor auctor, tempor id, nunc. Maecenas tortor ante sit amet, consectetuer viverra semper convallis. Fusce nulla. Phasellus ipsum primis in consequat lacus quis nulla ac enim sed lorem leo, ac posuere cubilia Curae, Quisque et ligula. Duis elementum dui. Suspendisse sed libero. Aliquam quis ante. Ut turpis. Duis dictum.</p>
   <p>Nunc vulputate. Donec adipiscing elit. Aliquam erat volutpat. Curabitur at neque. Integer non sem. Nam quis nibh rutrum posuere elementum dui. Aenean ac libero. Cras rhoncus vel, orci. Sed nibh pulvinar vitae, fringilla orci. Integer adipiscing. Nam feugiat congue, aliquet enim quis enim. Phasellus a ornare facilisis dignissim dapibus non, tempor ac, tempus euismod. Integer lacinia porta. Ut molestie placerat, egestas a, posuere risus. Morbi id nibh. Morbi mattis. Aliquam ut erat. In bibendum a, mauris. Nunc gravida. In lacus lacus nec dui. Morbi vitae ante. Suspendisse molestie. Phasellus vitae est turpis viverra sit amet enim. Sed sit amet dolor. Maecenas tincidunt. Aliquam bibendum, neque tristique in, commodo est massa mattis faucibus. Sed sed interdum ipsum sit amet, tellus. Ut sodales, augue eget imperdiet lectus bibendum ac, ultricies eu, facilisis hendrerit. Fusce quam placerat velit pede sit amet eros. In id lectus. Phasellus ornare sollicitudin. Cras ac diam. Nulla a wisi. Morbi vel nulla.</p>
</div>
<div id="foot">
   <p>Jakiś tekst na stopce.</p>
</div>
Do którego dodałem następujące style:
html, body, h1, h2, h3, p, a {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
}
h1 {
	color: #0066CC;
	font-size: 32px;
	margin: 0 0 10px 30px;
	text-shadow: 1px 2px 2px #000;
}
h2 {
	font-size: 24px;
	margin: 0 0 10px 30px;
	text-shadow: 1px 1px 2px #000;
}
h3 {
	font-size: 20px;
	text-shadow: 1px 2px 2px #000;
}
p {
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 150%;
}
#head {
	height: 125px;
	width: 100%;
	padding-top: 30px;
	background: url(img/header.jpg) repeat-x 0 top;
}
#tresc {
	width: 600px;
	margin: 0 170px;
	padding: 20px 30px 40px;
	background-color: #f8ffa9;
	border: solid 3px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 5px 50px #000;
	-moz-box-shadow: 0 5px 50px #000;
	box-shadow: 0 5px 50px #000;
}
 
#foot {
	height: 117px;
}
 
#foot p a {
	color: #b30;
	font-size: 20px;
	line-height: 110px;
	margin-left: 30px;
	text-shadow: 2px 2px 2px #000;
}
#foot p a:hover {
	color: #990;
}
W powyższym kodzie zastosowałem atrybuty odpowiadające za generowanie zaokrąglonych rogów w treści oraz cienia pod nagłówkami na stronie.
Teraz pewnie się zastanawiasz, a w którym miejscu jest opisane jak wstawić to wielokrotne tło?
To tło zostaje wstawione w następującym miejscu:
body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(img/dots.jpg) no-repeat; /*definicja tła dla przeglądarek typu IE7/IE8*/
	background: url(img/logo1.jpg) no-repeat 50px 300px,
				url(img/logo2.jpg) no-repeat 850px 550px,
				url(img/footer.jpg) repeat-x 0 bottom,
				url(img/dots.jpg) no-repeat center 0;/*wielorotne tło*/
}
Wykorzystałem tutaj dwa razy atrybut background. Pierwsze użycie tego atrybutu jest przystosowane dla IE7/IE8 i starszych przeglądarek, które nie obsługują CSS3 (wtedy też nie zadziałają zaokrąglenia i cienie pod nagłówkami). Natomiast w drugim użyciu jest opisane użycie wielokrotnego tła.
Należy pamiętać o tym, by odpowiednio pozycjonować elementy tła na stronie, aby nie nachodziły na siebie. Muszę też dodać, że ze względu na pozycjonowanie tła względem body, na różnych rozdzielczościach to tło będzie trochę inaczej wyglądać. Część elementów może się ukryć pod treścią lub w ogóle zniknąć z pola widzenia strony. Lecz nic nie stoi na przeszkodzie, aby takie wielokrotne tło dodawać do elementów które będą cały czas widoczne na "wierzchniej warstwie" strony, to znaczy można takie tło dać jako tło do bannera reklamowego.
Efekt ten działa we wszystkich najnowszych wersjach przeglądarek Mozilla Firefox, Google Chrome, Safari, Opera oraz IE9.

Demo z tego artykułu możesz zobaczyć tutaj: css wielokrotne tło
Pliki z demem z tego artykułu można pobrać stąd: pobierz demo z tego artykułu.

  • bet365

    hello!This was a really excellent subject!
    I come from china, I was luck to approach your topic in wordpress
    Also I obtain much in your theme really thank your very much i will come daily

  • Paweł Nowakowski

    Witam serdecznie,
    ostatnimi czasy czytuje Twojego bloga i muszę przyznać, że bardzo miło spędza się przy tym czas. Mój pierwszy komentarz jest pytaniem i jednocześnie prośbą o poradę. Chciałbym się poradzić pewnej kwestii dotyczącej CSS’a. Otóż spotykam się z różnymi opiniami dotyczącymi pozycjonowania tzw „pudełek” strony internetowej. Jak myślisz tworząc schemat strony internetowej a następnie opisując go w CSS, do układania kolejnych „pudełek” obok siebie lepiej jest posługiwać się parametrami „float” czy „position”. Już od dłuższego czasu mi to mąci w głowie 🙂

    Z góry dziękuję za odpowiedź.

  • Wszystkie swoje strony buduję w oparciu o float, dzięki temu mogę łatwo kontrolować ich sposób wyświetlania.
    Position jest dobre, jeśli mamy skomplikowaną grafikę, a zależy nam na nachodzeniu ich na pewne elementy.
    Dziękuję za czytanie mojego bloga i zapraszam ponownie. W najbliższym czasie powinno się pojawić kilka interesujących artykułów z CSS i PHP.

  • Paweł Nowakowski

    Dzięki wielkie za odpowiedź. Utwierdziłeś mnie w tym przekonaniu. Na pewno będę częściej tutaj wracał.

    Pozdrawiam.

  • kubek

    Witam
    Bardzo fajne kiedyś się własnie zastanawiałem jak jest robione takie tło z kilku obrazków, no i już teraz wiem. Przyda mi się to na pewno
    Dzięki

  • KejeN

    Bardzo przydatny wpis. Po raz kolejny css3 mnie zaskakuje – aż ciśnie się na usta „no wreszcie!” Rozwiązania z tej wersji są po prostu takie o jakich „łebmasterzy” sobie dawno marzyli – koniec z np. niepotrzebnym kodem żeby zrobić zaokrąglone rogi. Pozostaje tylko zażyłości użytkowników internetu do starych przeglądarek:)