logo

Jak dodać obraz tła w CSS?

The zdjęcie w tle Właściwość w CSS służy do ustawiania obrazu jako tła elementu. Korzystając z tej właściwości CSS, możemy ustawić jeden lub więcej obrazów tła dla elementu.

Domyślnie obraz jest umieszczany w lewym górnym rogu elementu i powtarzany zarówno w poziomie, jak i w pionie. Obraz tła należy dobrać odpowiednio do koloru tekstu. Zła kombinacja tekstu i obrazu tła może być przyczyną źle zaprojektowanej i nieczytelnej strony internetowej.

The adres URL() Wartość tej właściwości pozwala nam dołączyć ścieżkę pliku do dowolnego obrazu. Pokaże tło elementu. Jako tło możemy użyć wielu obrazów lub mieszanki gradientów i obrazów. Jeśli obraz tła nie został załadowany lub jeśli używamy gradientów, ale nie są one obsługiwane w odpowiedniej przeglądarce, wówczas możemy użyć wartości zastępczej (wartości używanej jako podstawienie) jako koloru tła elementu.

np.random.rand

Składnia

 background-image: url(); 

Wartości

adres URL(): Jest to adres URL obrazu. Jeśli chcemy określić więcej niż jeden obraz, adresy URL możemy oddzielić przecinkiem.

stlc

Przykład

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Przetestuj teraz

Wyjście

Jak dodać obraz tła w CSS

Przykład

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Przetestuj teraz

Wyjście

Jak dodać obraz tła w CSS

Przykład

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
Przetestuj teraz

Wyjście

Jak dodać obraz tła w CSS