2. Start
  3. Nauka
  4. Materiały dodatkowe
  5. CSS
  6. 07b. Tło - obraz
Materiały dodatkowe
CSS

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;
}
 
Rating:
( 0 Rating )

Menu