CSS background-image
Proprietatea background-image setează o imagine care va fi folosită ca fundal al unui element.
În mod implicit, imaginea se repetă astfel încât să acopere întregul element.
Notă: Alege o imagine de fundal care nu face textul greu de citit.
Imagine de fundal a paginii
Imaginea este setată ca fundal al întregii pagini.
Prompt
O pagină HTML care setează o imagine de fundal pentru întreaga pagină.
Într-un bloc
<style> intern, setează background-image al body-ului la url("paper.gif"). Adaugă un titlu și un paragraf. În mod implicit, imaginea se repetă pentru a acoperi pagina.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page uses paper.gif as its background image.</p>
</body>
</html>
Combinație proastă
Aceasta arată un amestec nefericit de text și imagine de fundal, unde textul este greu de citit.
Prompt
O pagină HTML care arată o alegere proastă de imagine de fundal, unde textul este greu de citit.
Într-un bloc
<style> intern, setează background-image al body-ului la url("bgdesert.jpg"). Adaugă un titlu și un paragraf de text peste ea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This busy background image makes the text hard to read.</p>
</body>
</html>
Imagine de fundal pe un paragraf
Imaginea de fundal poate fi setată și pe un element specific, precum elementul <p>.
Prompt
O pagină HTML care setează o imagine de fundal pe un singur element, în loc de pagină.
Într-un bloc
<style> intern, setează background-image al elementului <p> la url("paper.gif"). Adaugă un paragraf, astfel încât doar el să primească imaginea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Only this paragraph uses paper.gif as its background image.</p>
</body>
</html>
Proprietatea CSS Background Image
Proprietatea acoperită în această pagină este background-image, care setează imaginea de fundal pentru un element.