07b. Tło - obraz

CSS Wynik działania
Obraz wykorzystywany jako tło
Określenie obrazu tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat:repeat
domyślne działanie

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat:repeat-x

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:repeat-x;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat:repeat-y

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:repeat-y;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat:no-repeat

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:no-repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat: space

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:space;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-repeat: round

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-repeat:round;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-attachment:scroll
domyślne działanie

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-attachment:scroll
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-attachment:fixed

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-attachment:fixed
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-position:left top
domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-position:top left;
    background-repeat:no-repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-position:top right
domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-position:top right;
    background-repeat:no-repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
Wszystkie określenia położenia
  • background-position: top left
  • background-position: top center
  • background-position: top right
  • background-position: center left
  • background-position: center center
  • background-position: center right
  • background-position: bottom left
  • background-position: bottom center
  • background-position: bottom right
background-position wartości liczbowe
domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-position:20px 20px;
    background-repeat:no-repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
background-position wartości liczbowe
Na potrzeby przykładu nie będziemy powtarzać tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-position:-20px -20px;
    background-repeat:no-repeat;
    height:180px;
    width:460px;
    border:1px solid black;
}
 
Teraz pokażę, że pozycja początkowa ma wpływ na powtarzanie tła

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-position:25px 25px;    
    height:180px;
    width:460px;
    border:1px solid black;
}
Div ze zmienioną pozycją tła
 
Div bez zmienionej pozycji tła (dla porównania)
 
background-size : wartości liczbowe - 2 wartości

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:200px 30px
    height:180px;
    width:460px;    
    border:1px solid black;
}
 
background-size : wartości liczbowe - jedna wartość

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:200px
    height:180px;
    width:460px;    
    border:1px solid black;
}
 
background-size: wartości procentowe - dwie wartości

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:50% 30%
    height:180px;
    width:460px;    
    border:1px solid black;
}
 
background-size: wartości procentowe - jedna wartość

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:80%
    height:180px;
    width:460px;    
    border:1px solid black;
}
 
background-size : cover (przykrycie całego obszaru obrazem. Obraz zostanie rozciągnięty i przycięty)

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:cover
    height:180px;
    width:460px;    
    border:1px solid black;
}
 
background-size : contain (przykrycie całego obszaru obrazem. Obraz zostanie rozciągnięty na wysokość w taki sposób, aby na pewno był widoczny w całości)

div{
    background-image:url("/images/artykuly/obr/tile.jpg");
    background-size:contain
    height:180px;
    width:460px;    
    border:1px solid black;
}