Fundaluri CSS. CSS background-repeat: no-repeat. Poziția de fundal CSS. Atasament de fundal CSS.
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
Afișarea imaginii de fundal o singură dată este, de asemenea, specificată de proprietatea background-repeat:
Exemplu:
Afișează imaginea de fundal o singură dată:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
În exemplul de mai sus, imaginea de fundal este plasată în același loc cu textul. Vrem să schimbăm poziția imaginii, astfel încât să nu deranjeze prea mult textul.Poziția de fundal CSS (CSS background-position)
Proprietatea poziție fundal este utilizată pentru a specifica poziția imaginii de fundal.
Exemplu:
Poziționează imaginea de fundal în colțul din dreapta sus:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Atasament de fundal CSS (CSS background-attachment)
Proprietatea de atașare de fundal specifică dacă imaginea de fundal trebuie să se deruleze sau să fie fixată (nu va defila cu restul paginii):
Exemplu:
Specificați că imaginea de fundal trebuie să fie fixată:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Exemplu:
Specificați că imaginea de fundal trebuie să se deruleze cu restul paginii:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}