Sintassi

Significato dei valori principali:

• position-x position-y: specifica la posizione orizzontale e verticale dello sfondo, ad esempio background-position: 50% 50% per centrare lo sfondo.

• top: posiziona lo sfondo nella parte superiore dell'elemento.

• center: posiziona lo sfondo al centro dell'elemento.

• bottom: posiziona lo sfondo nella parte inferiore dell'elemento.

• left: posiziona lo sfondo sulla parte sinistra dell'elemento.

• right: posiziona lo sfondo sulla parte destra dell'elemento.

Esempio proprietà: background-position

Codice Esempio: background-position

CODE: CSS

1. .background-position-example {

2.   background-image: url('https://example.com/image.jpg');

3.   background-position: center;

4.   background-size: cover;

5.   padding: 50px;

6.   color: white;

7.   font-size: 22px;

8.   text-align: center;

9.   border-radius: 10px;

10. }

Contenuto Esempio: background-position

  
  <style>
    .background-position-example {
      width: 400px;
      height: 150px;
      background-image: url('https://example.com/image.jpg');
      background-position: center;   /* Posiziona l'immagine al centro */
      background-size: cover;        /* Fa coprire tutta l'area */
      background-repeat: no-repeat;  /* Evita la ripetizione */
      padding: 50px;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  
  <div class="background-position-example">
    Sfondo centrato
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser