Wartość none jest domyślną wartością właściwości background-image.
Domyślnie żaden obrazek nie tworzy tła obrazkowego elementu HTML.
background-image:none;
żaden obrazek nie tworzy tła obrazkowego tego elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
żaden obrazek nie tworzy tła obrazkowego tego elementu HTML
</div>
</body>
</html>
Za pomocą właściwości background-image oraz funkcji url() możemy określić, który obrazek powinien tworzyć tło obrazkowe interesującego nas elementu HTML.
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-01.png"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-01.png"
</div>
</body>
</html>
Za pomocą właściwości background-image oraz funkcji linear-gradient() możemy określić, jaki gradient liniowy powinien tworzyć tło obrazkowe interesującego nas elementu HTML.
background-image:linear-gradient(gold, green);
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:linear-gradient(gold, green);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
</div>
</body>
</html>
Za pomocą właściwości background-image oraz funkcji repeating-linear-gradient() możemy określić, jaki powtarzający się gradient liniowy powinien tworzyć tło obrazkowe interesującego nas elementu HTML.
background-image:repeating-linear-gradient(gold 0%, green 12.5%, gold 25%);
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:repeating-linear-gradient(gold 0%, green 12.5%, gold 25%);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
</div>
</body>
</html>
Za pomocą właściwości background-image oraz funkcji radial-gradient() możemy określić, jaki gradient promienisty powinien tworzyć tło obrazkowe interesującego nas elementu HTML.
background-image:radial-gradient(gold, green);
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:radial-gradient(gold, green);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
</div>
</body>
</html>
Za pomocą właściwości background-image oraz funkcji repeating-radial-gradient() możemy określić, jaki powtarzający się gradient promienisty powinien tworzyć tło obrazkowe interesującego nas elementu HTML.
background-image:repeating-radial-gradient(gold 0%, green 12.5%, gold 25%);
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:repeating-radial-gradient(gold 0%, green 12.5%, gold 25%);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
</div>
</body>
</html>
Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości background-image możemy sprawić, że tło interesującego nas elementu HTML będzie składało się z kilku obrazków jednocześnie. Najbardziej na wierzchu będzie ten obrazek, który wskażemy jako pierwszy w naszym zapisie.
Podana przez nas sekwencja wartości właściwości "background-image" nie może zawierać wartości globalnych.
background-image:linear-gradient(orange, transparent), url(https://webkod.pl/files/css/obrazek-01.png);
ten element "div" posiada tło obrazkowe składające się z dwóch różnych obrazków jednocześnie (z obrazka w postaci gradientu liniowego oraz z obrazka znajdującego się pod adresem "https://webkod.pl/files/css/obrazek-01.png"), ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z następującą sekwencją wartości: "linear-gradient(orange, transparent), url(https://webkod.pl/files/css/obrazek-01.png)"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:linear-gradient(orange, transparent), url(https://webkod.pl/files/css/obrazek-01.png);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten element "div" posiada tło obrazkowe składające się z dwóch różnych obrazków jednocześnie (z obrazka w postaci gradientu liniowego oraz z obrazka znajdującego się pod adresem "https://webkod.pl/files/css/obrazek-01.png"), ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z następującą sekwencją wartości: "linear-gradient(orange, transparent), url(https://webkod.pl/files/css/obrazek-01.png)"
</div>
</body>
</html>
