Imagini de Fundal HTML
O imagine de fundal poate fi setată pe aproape orice element HTML.
Imagine de Fundal pe un Element HTML
Pentru a pune o imagine de fundal pe un element, folosește atributul style cu proprietatea CSS background-image. O poți seta și într-un element <style> din <head>.
Inline
O imagine de fundal setată inline pe un paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fundal inline</title>
</head>
<body>
<p style="background-image: url('img_girl.jpg');">Acest paragraf are o imagine de fundal.</p>
</body>
</html>
În elementul style
O imagine de fundal setată pentru toate paragrafele în elementul <style>.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<p>Acest paragraf are o imagine de fundal.</p>
</body>
</html>
Imagine de Fundal pe o Pagină
Pentru a da întregii pagini o imagine de fundal, setează background-image pe elementul <body>.
Exemplu
O imagine de fundal pentru întreaga pagină.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h1>Salut, lume!</h1>
<p>Această pagină are o imagine de fundal.</p>
</body>
</html>
Repetarea Fundalului
Dacă imaginea de fundal este mai mică decât elementul, ea se repetă pe orizontală și pe verticală până ce elementul este umplut. Pentru a opri acest lucru, setează proprietatea background-repeat la no-repeat.
Repetitiv
O imagine mică de fundal care se repetă pentru a umple pagina.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>
<h1>Salut, lume!</h1>
<p>Imaginea de fundal se repetă pentru a umple pagina.</p>
</body>
</html>
Fără repetare
Aceeași imagine setată să nu se repete.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Salut, lume!</h1>
<p>Imaginea de fundal nu se repetă.</p>
</body>
</html>
Acoperirea Fundalului
Pentru a face imaginea de fundal să acopere întregul element, setează background-size la cover. Setează background-attachment la fixed pentru ca elementul să rămână acoperit. Imaginea își păstrează proporțiile și nu este întinsă.
Exemplu
O imagine de fundal care acoperă întreaga pagină.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1>Salut, lume!</h1>
<p>Imaginea de fundal acoperă întreaga pagină.</p>
</body>
</html>
Întinderea Fundalului
Pentru a face imaginea de fundal să se întindă și să umple întregul element, setează background-size la 100% 100%. Redimensionarea ferestrei întinde imaginea, dar aceasta acoperă mereu elementul.
Exemplu
O imagine de fundal întinsă pentru a umple pagina.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>Salut, lume!</h1>
<p>Imaginea de fundal se întinde pentru a umple pagina.</p>
</body>
</html>
Află Mai Multe CSS
Aceste exemple arată că imaginile de fundal sunt stilizate cu proprietățile CSS de fundal. Pentru a afla mai multe, studiază tutorialul PromptCookbook CSS Background.