Fundaluri Multiple CSS
CSS vă permite să adăugați mai multe imagini de fundal unui element folosind proprietatea background-image.
Separați fiecare imagine cu o virgulă. Imaginile se suprapun una peste alta, prima imagine fiind cea mai aproape de vizualizator.
Proprietăți individuale de fundal
Acest exemplu folosește două imagini de fundal cu proprietăți individuale: background-image, background-position și background-repeat. Prima imagine este o floare aliniată în dreapta jos, iar a doua este o textură de hârtie care se repetă.
Prompt
Creați o pagină cu un div care are două imagini de fundal folosind proprietăți CSS individuale: background-image, background-position și background-repeat. Prima imagine (o floare mică, folosiți "img_flwr.gif") ar trebui să fie aliniată în dreapta jos, fără repetare, iar a doua imagine (o textură de hârtie, folosiți "paper.gif") ar trebui să se repete din colțul din stânga sus. Adăugați ceva text lorem ipsum în interiorul div-ului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Individual Properties</title>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</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>
Proprietatea prescurtată background
Puteți folosi și proprietatea prescurtată background pentru a seta mai multe fundaluri într-o singură declarație. Aceasta oferă același rezultat ca exemplul de mai sus.
Prompt
Creați o pagină cu un div care are două imagini de fundal folosind proprietatea prescurtată CSS background. Prima imagine ("img_flwr.gif") ar trebui să fie right bottom no-repeat, iar a doua imagine ("paper.gif") ar trebui să fie left top repeat. Adăugați ceva text lorem ipsum în interiorul div-ului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Shorthand</title>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</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>
Proprietăți CSS avansate pentru fundal
Iată proprietățile CSS de fundal folosite pentru fundaluri avansate:
background— o proprietate prescurtată pentru setarea tuturor proprietăților de fundal într-o singură declarație.background-clip— stabilește zona de desenare a fundalului.background-image— stabilește una sau mai multe imagini de fundal pentru un element.background-origin— stabilește unde este poziționată imaginea de fundal.background-size— stabilește dimensiunea imaginii de fundal.