Inne działy

 

 

Ustawienia tła za pomocą CSS

Ten poradnik nauczy Cię, jak ustawić tła różnych elementów HTML. Można ustawić następujące właściwości elementu tła:

  • Właściwość background-color  jest używana do umieszenia koloru tła elementu.
  • Właściwość background-image jest używana do ustawiania obrazu tła dla elementu.
  • Właściwość background-repeat  jest używana do kontroli powtarzania obrazu w tle.
  • Właściwość background-position  jest używana do kontroli położenia obrazu w tle.
  • Właściwość background-attachment  jest używana do kontroli, przewijania obrazu w tle.
  • Właściwość background jest używana, jako skrót, aby określić liczbę innych właściwości tła.

Kolor tła:

Oto przykład, który pokazuje, jak ustawić kolor tła dla elementu.

 

<p style="background-color:yellow;">
Ten tekst ma żółty kolor tła.
</p>

 Poniżej wynik działania kodu: 

 

Ten tekst ma żółty kolor tła.

 

Umieszczenie obrazu w tle:

Oto przykład, który pokazuje, jak ustawić obraz tła dla elementu.

<table style="background-image:url(/images/pattern1.gif);">
<tr><td>
Ta tabela ma ustawiony obraz w tle.
</td></tr>
</table>

 

Powtórzenia obrazu w tle:

Oto przykład, który pokazuje, jak powtórzyć tło obrazu, jeśli obraz jest mały. Można użyć wartość no-repeat właściwość background-repeat, jeśli nie chcesz powtórzeń obrazu, w tym przypadku obraz będzie wyświetlany tylko raz.

Domyślnie właściwość background-repeat będzie miaał wartość repeat .

 

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat;">
<tr><td>
Ta tabela ma, jako tło umieszczony obrazek, który jest powielony wielokrotnie.
</td></tr>
</table>

 Oto przykład, który pokazuje, jak powtórzyć obraz w tle w pionie.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-y;">
<tr><td>
Ta tabela ma w tłe obraz, który będzie powtarzany w pionie.
</td></tr>
</table>

 Oto przykład, który pokazuje, jak powtórzyć obraz w tłe poziomo.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-x;">
<tr><td>
Ta tabela ma w tłe obraz, który będzie powtarzany w poziomie.
</td></tr>
</table>

 

Ustawienie pozycji obrazu w tle:

Oto przykład, który pokazuje, jak ustawić obraz tła w pozycji 100 pikseli od lewej strony.

 

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px;">
<tr><td>
Tło obrazu jest umieszczone 100 pikseli od lewej strony.
</td></tr>
</table>

 Oto przykład, który pokazuje, jak ustawić tło obraz w pozycji 200 pikseli w dół od górnej krawędzi i 100 pikseli od lewej krawędzi.

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px 200px;">
<tr><td>
Ta tabela ma tło obrazu umieszczone 100 pikseli od lewej i 200 pikseli od górnej krawędzi.
</td></tr>
</table>

 

Zablokowanie tła

Właściwość background-attachment określa, czy obraz tła jest stały lub czy przewija się z resztą strony.

Oto przykład, który pokazuje, jak ustawić na stałe obraz w tle.

 

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:fixed;">
Ten parapgraph ma tło stałe.
</p>

 Oto przykład, który pokazuje, jak ustawić obraz w tle, aby był przewijany razem ze stroną.

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:scroll;">
Ten akapit ma, przewijanie obrazu tła.
</p>

 

Skrócone własności:

Własność background umożliwia ustawienie wszystkich właściwości tła na raz. Na przykład:

 

<p style="background:url(/images/pattern1.gif) repeat fixed;">
Ten parapgraph ma stałe powtarzające się tło.
</p>

 

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.