Inne działy

 

 

CSS właściwość background-image

 

Definicja i Wykorzystanie

 

Właściwość Background-image określa jedno lub więcej zdjęć, które ma być tłem dla elementu.

Tło elementu jest to całkowity rozmiar elementu, w tym padding i border (ale nie margin).

Domyślnie, background-image jest umieszczony w lewym górnym rogu elementu, i powielane zarówno w pionie jak i poziomie.

 

Wartość domyślna: brak
Dziedziczenie: nie
Wersja: CSS1
JavaScript składnia: object.style.backgroundImage="url(gwiazda.gif)"

 

Właściwość Background-image jest obsługiwana przez wszystkie główne przeglądarki.

Uwaga: IE8 i wcześniejsze nie obsługują wielu obrazów tła w jednym elemencie.

Uwaga: wartość "inherit" nie jest obsługiwana w IE7 i wcześniejszych. IE8 wymaga !DOCTYPE. IE9 obsługuje "inherit"(dziedziczenie).

Porady i Wskazówki

Wskazówka: Zawsze należy ustawić właściwość background-color, który będzie używany, jeżeli obraz jest niedostępny.

Wartości właściwości

 

WartośćOpis
url('URL') URL do obrazu. Aby określić więcej niż jeden obraz, oddziel adresy przecinkami
none Jeśli obrazek tła nie będzie wyświetlony to ta opcja będzie domyślna
inherit Określa, że obraz tła powinien być dziedziczony z elementu nadrzędnego

 

Przykład

body {background-image: url(img/mojobrazek.jpg);}

 

?<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.background {
border:1px solid #000;
background-image:url('images/mojobraz.png');
}
</style>
</head>
<body>
<h1>Background-Image Przykład</h1>
<div class="background"><p>Jest to przykład własności tła obrazu. </p></div>
</body>
</html>

Przykład

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url('mojobraz.gif');
background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Witaj świecie!</h1>
</body>

</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.