Obrazy tła HTML
Obraz tła można określić dla prawie każdego elementu HTML.
Obraz tła w elemencie HTML
Aby dodać obraz tła do elementu HTML, użyj style
atrybutu HTML i właściwości CSS background-image
:
Przykład
Dodaj obraz tła do elementu HTML:
<div style="background-image: url('img_girl.jpg');">
Możesz również określić obraz tła w <style>
elemencie, w <head>
sekcji:
Przykład
Określ obraz tła w <style>
elemencie:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Obraz tła na stronie
Jeśli chcesz, aby cała strona miała obraz tła, musisz określić obraz tła na <body>
elemencie:
Przykład
Dodaj obraz tła dla całej strony:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
powtarzanie tła
Jeśli obraz tła jest mniejszy niż element, obraz będzie się powtarzał w poziomie i w pionie, aż dojdzie do końca elementu:
Przykład
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Aby uniknąć powtarzania się obrazu tła, ustaw background-repeat
właściwość na no-repeat
.
Przykład
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Okładka w tle
Jeśli chcesz, aby obraz tła obejmował cały element, możesz ustawić background-size
właściwość na
cover.
Ponadto, aby mieć pewność, że cały element jest zawsze zakryty, ustaw
background-attachment
właściwość nafixed:
W ten sposób obraz tła pokryje cały element, bez rozciągania (obraz zachowa oryginalne proporcje):
Przykład
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Rozciąganie tła
Jeśli chcesz, aby obraz tła był rozciągnięty tak, aby pasował do całego elementu, możesz ustawić background-size
właściwość na
100% 100%
:
Spróbuj zmienić rozmiar okna przeglądarki, a zobaczysz, że obraz się rozciągnie, ale zawsze zakryje cały element.
Przykład
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Dowiedz się więcej o CSS
Z powyższych przykładów nauczyłeś się, że obrazy tła można stylizować za pomocą właściwości tła CSS.
Aby dowiedzieć się więcej o właściwościach tła CSS, zapoznaj się z naszym samouczkiem dotyczącym tła CSS .