Proprietatea CSS background-size
Imaginile de fundal nu trebuie să apară neapărat la dimensiunile lor naturale, pentru că background-size le poate schimba.
Proprietatea acceptă o lungime, un procent sau unul dintre trei cuvinte cheie: auto, contain și cover.
Dimensiunea fundalului cu pixeli
Aici, valorile în pixeli micșorează imaginea de fundal până când devine mult mai mică decât fișierul sursă.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Pixels</title>
<style>
#div1 {
background-image: url("img_flower.jpg");
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Lorem Ipsum Dolor</h2>
<div id="div1">
<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>
Dimensiunea fundalului cu contain, cover și auto
auto este ceea ce obții dacă nu setezi nimic: imaginea își păstrează dimensiunile originale.
contain redimensionează imaginea, în sus sau în jos, astfel încât să încapă în zona de conținut.
cover face imaginea suficient de mare încât nicio parte a zonei de conținut să nu rămână neacoperită.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Keywords</title>
<style>
div {
width: 100%;
height: 200px;
border: 1px solid black;
margin-bottom: 20px;
background-image: url("img_flwr.gif");
background-repeat: no-repeat;
}
#div1 {
background-size: contain;
}
#div2 {
background-size: cover;
}
#div3 {
background-size: auto;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<div id="div1"></div>
<h2>background-size: cover</h2>
<div id="div2"></div>
<h2>background-size: auto</h2>
<div id="div3"></div>
</body>
</html>
Definirea dimensiunilor pentru mai multe imagini de fundal
Când un element are mai multe fundaluri, dă-i proprietății background-size o listă de valori separate prin virgulă.
Exemplu
Fiecare dintre cele trei imagini de fundal de aici primește propria valoare background-size.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple Background Sizes</title>
<style>
#div1 {
background-image: url("img_tree.gif"), url("img_flwr.gif"), url("paper.gif");
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Multiple Background Sizes</h2>
<div id="div1"></div>
</body>
</html>
Imagine de Fundal CSS la Dimensiune Completă
Stilizând elementul <html>, faci ca o imagine de fundal să umple în permanență fereastra browserului. Scopul este o imagine centrată, care se scalează când este nevoie, umple pagina fără niciun spațiu alb și nu provoacă niciodată apariția barelor de derulare.
Exemplu
Pe elementul <html>, centrează și fixează fundalul, apoi lasă background-size: cover să-l întindă pe toată fereastra.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Size Background Image</title>
<style>
html {
background: url("img_man.jpg") no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Size Background Image</h1>
<p>This background image covers the entire browser window.</p>
</body>
</html>
Imagine Hero CSS
O imagine hero este o imagine mare cu text deasupra, iar pentru a o construi este suficient un <div> cu câteva proprietăți de fundal.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero Image</title>
<style>
.hero-image {
background: url("img_man.jpg") no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1>I am John</h1>
<p>And I'm a Photographer</p>
</div>
</div>
</body>
</html>